Для выравнивания буллетов по центру справа с использованием flex и абсолютного позиционирования, вам потребуется следующая структура HTML и стили CSS:
HTML:
```html
<ul class="slider-pagination">
<li></li>
<li></li>
<li></li>
</ul>
```
CSS:
```css
.slider-pagination {
display: flex;
justify-content: flex-end;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
}
.slider-pagination li {
width: 10px;
height: 10px;
background-color: #ccc;
border-radius: 50%;
margin-left: 5px;
}
.slider-pagination li.active {
background-color: #ff0000;
}
```
В данном примере слайдер имеет класс `.slider-pagination`, для которого мы задаем `display: flex` и `justify-content: flex-end`, чтобы буллеты выровнялись по центру справа. Затем, мы используем абсолютное позиционирование с `right: 0` и `top: 50%` для выравнивания пагинации по правому краю, а `transform: translateY(-50%)` для центрирования ее по вертикали.
Каждый буллет представлен в виде элемента `li` внутри списка `ul`. Мы задаем им ширину (`width`), высоту (`height`), фоновый цвет (`background-color`), радиус скругления (`border-radius`) и отступ слева (`margin-left`). Они будут иметь отступ слева друг от друга.
Для активного буллета вы можете добавить класс `.active` к соответствующему элементу `li` и определить нужные стили для него, в данном случае мы меняем фоновый цвет на красный (`background-color: #ff0000`).
Если вы хотите создать стиль для активного буллета с использованием псевдоэлемента, вы можете добавить следующий CSS:
```css
.slider-pagination li.active::before {
content: '';
width: 20px;
height: 20px;
background-color: #ff0000;
border-radius: 50%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: -1;
}
```
В данном примере мы создаем псевдоэлемент `::before` для активного элемента `li`. Мы устанавливаем его содержимое (`content: ''`), ширину (`width`), высоту (`height`), фоновый цвет (`background-color`), радиус скругления (`border-radius`), а также применяем абсолютное позиционирование с отрицательным `z-index`, чтобы псевдоэлемент находился позади основного элемента.
Затем, с помощью `left: 50%`, `top: 50%` и `transform: translate(-50%, -50%)` мы выравниваем псевдоэлемент по центру активного буллета.
Надеюсь, это поможет вам выровнять буллеты по центру справа и создать стиль для активного буллета с помощью псевдоэлемента.