How to make bullet and underline link in widget

[Eljon]

Hello,
how to make bullet and underline link in widget, like this picture
https://imgur.com/cW5LIQX

[David]

Hi there,

try this CSS:

.widget ul {
    list-style: none !important;
    position: relative;
    margin-left: 0 !important;  
}
.widget ul li {
    padding-left: 2em;
    padding-top: 1em;
    padding-bottom: 1em;
    border-bottom: 1px dashed #4f5a5e; 
}

.widget ul li:before {
    content: "\2756";
    position: absolute;
    top: 1em;
    left: 0;
    font-size: 22px;
    color: #4f5a5e;
}

The icon is this one:

https://www.toptal.com/designers/htmlarrows/symbols/black-diamond-minus-white-x/

You can replace the CSS unicode here: content: "\2756"; with any icon from that site.
The one your example uses is a custom icon.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Eljon]

Perfect, thank you David.

[David]

You’re welcome

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts