All geek questions in one place

How do I embed the: before element when I cannot include the CSS / style section?

I am looking for the style of the li element and would like to change this CSS property:

li:before { color: blue; }

However, I am limited only to using html, inline, styling. I do not have access to the section of the document I'm working on.

This is what I am trying to do, doable, and if so, how?

+4
source share
3 answers

In CSS, inline styles take precedence over linked CSS files, so you can do something similar with your personal elements: -

 <li style="color: red;">This is a list item</li>

And this will take precedence over the linked stylesheet or internal stylesheet.

If you want to use more complex selectors, unfortunately, you're out of luck.

See: CSS Pseudo-Classes with Inline Styles

+1
source

You can insert a new stylesheet with the following HTML:

 <style scoped> li:before { color: red; } </style>

The reason this is the only way to do this is because :before is a pseudo-element, which means that it does not actually become part of the DOM. Unfortunately, this means that there is no way to style it inline as requested.

As an example:

 <li style="color: red;">text</li>

will stylize the entire LI element, not just its :before pseudo-element, and since the :before element has no markup, it cannot have its own property style= .

+6
source

You can add:

 <style scoped> li:before { color: red; } </style>

Anywhere as a direct child element of <body> , and it will apply to the whole page, as well as valid HTML5.

+1
source

Source: https://habr.com/ru/post/1478855/

More articles:


All Articles