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

M

3

8

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?

Micromho answered 2/5, 2013 at 19:17 Comment(2)

Is javascript a possibility? – Seldan 2/5, 2013 at 19:20

You can't simulate selectors using the style attribute - the selector is irrelevant, the styles apply to the element that the attribute is on. – Deshawndesi 2/5, 2013 at 19:20

S

2

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

Snead answered 2/5, 2013 at 19:22 Comment(4)

Except that applies to the whole element and not just the :before pseudo-element. That said, pseudo-element styles cannot be expressed in inline style attributes, for the reason stated in Adrian's comment. – Lanellelanette 2/5, 2013 at 19:23

Good point. In that case, what is being asked isn't possible #5293780 – Snead 2/5, 2013 at 19:24

@Mat sounds like your comment is the correct answer. Please post so I can accept. – Micromho 2/5, 2013 at 19:35

I've added some text to explain – Snead 2/5, 2013 at 19:38

P

7

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

<style>
  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.

Professed answered 2/5, 2013 at 19:19 Comment(5)

<style> elements must be in the <head> unless they have a [scoped] attribute. – Nickinickie 2/5, 2013 at 19:26

While Zzz is right, I commonly see <style> placed throughout the page and the styles are applied, especially in framework generated code. I don't condone the practice, and it may not work in the future... but if this HAS to work NOW to solve a business problem, it's a (not great) option. – Falster 2/5, 2013 at 20:30

@smclark89: yes - my point was not that it is a good way to solve the problem, but given the fairly stark restrictions provided by the OP, it seems necessary. – Professed 2/5, 2013 at 23:10

The scoped attribute has been removed from all browser support. Including it in this answer will create more confusion than help. – Sheffield 12/2, 2020 at 19:13

Yes, good point - thank you for the reminder to update this answer. I'll do so shortly. – Professed 12/2, 2020 at 23:3

S

2

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

Snead answered 2/5, 2013 at 19:22 Comment(4)

Except that applies to the whole element and not just the :before pseudo-element. That said, pseudo-element styles cannot be expressed in inline style attributes, for the reason stated in Adrian's comment. – Lanellelanette 2/5, 2013 at 19:23

Good point. In that case, what is being asked isn't possible #5293780 – Snead 2/5, 2013 at 19:24

@Mat sounds like your comment is the correct answer. Please post so I can accept. – Micromho 2/5, 2013 at 19:35

I've added some text to explain – Snead 2/5, 2013 at 19:38

N

1

You can add:

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

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

Nickinickie answered 2/5, 2013 at 19:42 Comment(0)

Recommended topics

Hot tags