CSS ::after Adding Ring Shape

Question

I'm looking to add a CSS shape after a div of content.

The shape will be a ring: so, a circle with a hole in the middle.

.name::after {
    content: '';
    width: 12px;
    height: 12px;
    border-width: 2px;
    border-style: solid;
    border-radius: 12px;
}

.name.track-1::after {
    border-color: #0065FF;
}

.name.track-2::after {
    border-color: #FFC300;
}

As you can see, I'm trying to apply a basic style ::after .name then when it's accompanied by additional classes like .track-1 or .track-2 it will be different colors.

I am seeing nothing show up though. I've also tried the CSS2 :after, no luck. I've tried putting border-color into the main .name::after with no luck. Any help would be great, thank you!

EDIT HTML was requested:

<div class="name track-1">This is the name of something here</div>

add `content` property and provide HTML also so we can solve it — Nisharg Shah, May 31 '19 at 14:21

score 4 · Accepted Answer · answered May 31 '19 at 14:21

4

You should specify a display: block property on .name::after.

answered May 31 '19 at 14:21

Shizon

139
6

Thanks, that worked! Also, I'm a dumb-dumb and mispelled a class name during selection, like `.this-thing .name` vs `.this-things .name`. – Kenny May 31 '19 at 14:28

CSS ::after Adding Ring Shape

1 Answers1