How to useCSS Pseudo-Elements in HTML

Style the options using the option selector, setting the font size and background color. Next, we use the option:before pseudo-element to insert content before each option. In this case, we’re adding a “>” symbol. We initially set display: none; for the pseudo-element to hide it by default. Upon hovering over an option (option:hover:before), we set display: inline; to show the “>” symbol.

Example: Illustration of styling the option of an HTML select element using CSS pseudo-elements.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>Pseudo Elements</title>
    <link rel="stylesheet" href="style.css" />
</head>
 
<body>
    <div>
        <select id="ddlProducts" name="Programming Languages">
            <option>Language1 : C++ </option>
            <option>Language2 : Java </option>
            <option>Language3 : Python </option>
            <option>Language4 : JavaScript </option>
        </select>
    </div>
</body>
 
</html>

CSS

option {
    font-size: 18px;
    background-color: #ffffff;
}
 
option:before {
    content: ">";
    font-size: 20px;
    display: none;
    padding-right: 10px;
    padding-left: 5px;
    color: #fff;
}
 
option:hover:before {
    display: inline;
}

Output:

Output

How to style the option of an HTML select element?

Styling the options of an HTML <select> element can enhance the visual appearance and usability of dropdown menus, making them more appealing and user-friendly. Styling options can be used to highlight or differentiate certain options, improving readability and guiding user interaction.