How do I inline the :before element when unable to include a CSS/style section?

I'm looking to style a li element, and would like to modify this CSS property:

li:before {
    color: blue; 
}

However, I am restricted to only using html, inline, styling. I don't have access to the section of the document I'm working on.

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

Answers


In CSS, inline styles take precedence over linked CSS files, so you could do something like this with your li elements:-

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

And it would take precedence over either a linked stylesheet, or an internal stylesheet.

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

See: CSS Pseudo-classes with inline styles


You can insert a new stylesheet inline with the following HTML:

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

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

As an example:

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

would style the entire LI element, not just it's :before pseudo-element, and because the :before element has no markup, it can not have it's own style= property.


Need Your Help

Repository pattern vs DTO pattern approach

c# java .net oop design-patterns

We can have these two approaches to send data to Data Access Layer or any other source:

Class Diagram with no Link

java class class-diagram

After downloading a repository of a java software (http://sourceforge.net/projects/gcs-java/) I used Enterprise Architect in order to create some class diagrams for me, example: