I'm trying to create the circle with css, but wan't to use pseudo class ::before
This should be like that (for list of subway stations):
.subway-item{
// css for text item going after circle
}
.subway-item::before{
width:15px;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
background-color:#69b6d5;
}
I know that it can be done with additional element before text or with image. But want to know is it possible to use such properties in ::before
Special welcome offer: get $100 of free credit. CSS ::before and ::after pseudo-elements allow you to insert “content” before and after any non-replaced element (e.g. they work on a <div> but not an <input> ). This effectively allows you to show something on a web page that might not be present in the HTML content.
To create a circle we can set the border-radius on the element. This will create curved corners on the element. If we set it to 50% it will create a circle. If you set a different width and height we will get an oval instead.
::before (:before) In CSS, ::before creates a pseudo-element that is the first child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.
You also need to set content
, height
and display
to make it actually render the pseudo element.
Example:
.subway-item::before{
content: '';
display: inline-block;
width: 15px;
height: 15px;
-moz-border-radius: 7.5px;
-webkit-border-radius: 7.5px;
border-radius: 7.5px;
background-color: #69b6d5;
}
<div class="subway-item"></div>
Note: It’s better to write the vendor-specific properties before the standard property (border-radius
in your case).
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With