How can I use the CSS pseudo-element :before{ content: '' } to affect an


Tags: html,css,pseudo-element

Problem :

If I have a list of optons, how can I use the CSS pseudo-element :before{ content: '' } to affect the <option>? Below there are three options an I'd like to insert text before each one.

I know this can be done wit javascript / jQuery, but is it possible with CSS?

<html>
<head>
    <style>

        option::before {
            content: "sandy - "
        }

    </style>


</head>
<body>

<select>
    <option>beach</option>
    <option>field</option>
    <option>carpet</option>
</select>


</body>
</html>


Solution :

The ::before and ::after pseudo-elements actually prepend/append a child node to the element, so this will not work on any element that cannot contain child nodes.

It would be (roughly) the equivalent of doing:

<option><span>sandy - </span>beach</option>

If you want to update the text value, you will need to use JavaScript.


    CSS Howto..

    html/css: how to on a single line center “title” and have on right buttons

    Show/hide css class by url parameter with php

    How to make my web page look Ok with IE7+? [closed]

    How to make ul nav fill the entire bottom of page evenly (without table display)

    How to set the specific prefix for file-loader in webpack?

    How to change color of button in active state using inline CSS?

    how to set width of piechart in dc.js through css

    on hover and on click how to fade out image and fade in content text

    how to number questions using class in CSS

    How do i put an X on the right side of a block?

    How to leave some top gap for H2 title tag with css

    How can i put random values to css properties using JQuery?

    using css modules how do I define more than one style name

    How to disable a CSS class with javascript on window.load()

    How to include (referencing) CSS Javascript jQuery in master page and content (child) page

    CSS3: How to add more than 2 CSS Ribbon effects to same banner?

    How to add an orange background to top of page

    How to create a border gap illusion

    How to make css layout to fit html content?

    CSS: how to make a horizontal images scroller with two images per column?

    How to see the print media CSS in Firebug?

    How do I limit the number of cells on a row in CSS

    CSS (Fixed width right, fluid left, left is first in html) How do I keep left div from collapsing?

    How do I align my navbar so it's permanently in the middle of my white box (without padding etc)?

    How to set div's height in css and html

    How to read CSS specification?

    How to center a relative div in my case?

    How to animate 2 css layouts from left to right or from right to left with jquery?

    custom radio button show value inside

    How do you mimic multi row horizontal scroll table behavior with CSS and Divs?