Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Pseudo class ::before - create css circle

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

like image 360
alvery Avatar asked Feb 27 '15 20:02

alvery


People also ask

When would you use the :: before or :: after pseudo-element in your CSS?

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.

How do you declare a circle in CSS?

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.

What's :: before in CSS?

::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.


1 Answers

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).

like image 109
aaronk6 Avatar answered Oct 10 '22 07:10

aaronk6