и что бы можно было прикрепить через after
div:after {}
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуПример
body {
background: url(https://c.pshere.com/photos/df/4c/background_beach_blue_sky_boat_clouds_exotic_horizon_idyllic-1000891.jpg!d) no-repeat center top /cover;
}
.discount {
display: inline-flex;
align-items: center;
padding: 1rem 2rem;
color: #f00;
font-size: 28px;
font-weight: 700;
border-radius: 35px 0 0 35px;
border: 2px solid #fff;
box-shadow: 0 5px 15px rgba(0, 0, 0, .15);
overflow: hidden;
box-sizing: border-box;
}
.discount::before {
content: '';
box-shadow: 0 0 0 2px #fff, 0 0 0 500px #FFD300;
width: 20px;
height: 20px;
border-radius: 50%;
margin-right: 1rem;
box-sizing: border-box;
}
<div class="discount">50%</div>
небольшой пример, но так не надо делать, потому что стили так себе адаптивные
div {
display: flex;
align-items: center;
justify-content: space-evenly;
height: 50px;
width: 100px;
background-color: #f7d304;
text-align: center;
color: #ea2716;
font-size: 25px;
font-weight: bold;
border-radius: 50px 0 0 50px;
}
div:before {
content: '';
display: block;
width: 15px;
height: 15px;
background-color: #d7d7d7;
border-radius: 50%;
border: 3px solid white;
}
<div>50%</div>