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

Eclipse CDT fails to run compiled executable in Windows with error “terminated, exit value: <some number>”

c++ g++ mingw runtime-error eclipse-cdt

I just reinstalled Windows on my machine. Before that, I was using the Eclipse CDT IDE for Windows (64-bit) with MinGW compiler suite (downloaded using mingw-get). Everything worked perfectly fine ...

when the method OnUnregistered() will be invoked in GCMIntentService Class

android android-intent android-c2dm google-cloud-messaging

I have successfully implemented the GCM framework for push notification in my android application.But I am little bit confused about the function overridden in GcmIntentService Class by Google.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.