Override user agent style for li element

Question

I have the following html.

   <div class="alert alert-error" role="alert">        
        <ul>
            <li>This is test message.</li>
        </ul>
    </div>

I am using bootstrap alert. Alert styles are override in custom css to add ban-circle before the alert message.

.alert {
    padding: 5px;
    margin-bottom: 5px;
    color: white;
}   

.alert-error {
    background-color: rgb(186, 39, 39);
}

    /*Using a Bootstrap glyphicon as ban-circle*/
    .alert-error li:before {
        content: "\e090"; 
        font-family: 'Glyphicons Halflings';
        padding-right: 5px;
    }

UI shows the ban circle before alert message, but it also shows dot before the ban-circle. The dot is coming from user agent style sheet. I have <!DOCTYPE html> as suggested in this SO

How do I get rid of the dot from the User Agent Style?

`.alert-error ul { list-style: none; }` should do the trick. — Gerard, Feb 25 '21 at 18:00

score 2 · Accepted Answer · edited Apr 19 '21 at 13:06

You can get rid of the dot by using list-style-type property of CSS value none. You can read further about the property here.

I have used it in the following code:

.alert {
    padding: 5px;
    margin-bottom: 5px;
    color: white;
}

.alert-error {
    background-color: rgb(186, 39, 39);
}

/*Using a Bootstrap glyphicon as ban-circle*/

.alert-error li:before {
    content: "\e090";
    font-family: 'Glyphicons Halflings';
    padding-right: 5px;
}

ul {
    list-style-type: none;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="./style.css">

    <title>Hello, world!</title>
</head>

<body>
    <div class="alert alert-error" role="alert">        
        <ul>
            <li>This is test message.</li>
        </ul>
    </div>

</body>

</html>

Override user agent style for li element

1 Answers1