Как зафиксировать псевдоэлемент before по центру?

Question

При сужении окна браузера, элемент before съезжает влево, a должен быть зафиксирован.

При position: fixed, происходит тоже самое.

ul.pagination {
  text-align: center;
  margin-top: 120px;
}

.pagination li {
  display: inline-block;
}

.pagination li a {
  color: white;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  background-color: #bdde38;
  margin-right: 8px;
  border-radius: 100%;
  border: 2px solid #cccccc;
}

.pagination li a:hover {
  background-color: #FF6600;
}

.pagination:before {
  content: "";
  width: 250px;
  height: 3px;
  background-color: #cccccc;
  position: absolute;
  z-index: -1;
  bottom: 506px;
  right: 500px;
}

<ul class="pagination">
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
</ul>

Answer 1

Как я понял из вашего вопроса Вы хотите что бы псевдоэлемент ::before находился по центру страницы, и оставался там вне зависимости от изменения размера viewport'a.

Я воспользовался Flex что бы отцентровать все элементы за раз:

ul {
  list-style-type: none;
  -webkit-padding-start: 0;
  padding: 0;
}

.pagination {
  display: flex;
  justify-content: center;
  position: relative;
  margin-top: 120px;
}

.pagination li {
  display: block; 
}

.pagination li a {
  color: white;
  background-color: #bdde38;
  text-decoration: none;
  padding: 8px 16px; 
  border: 2px solid #cccccc;
  border-radius: 50%;
  margin-right: 8px;
}

.pagination li:last-of-type a {
  margin-right: 0;
}

.pagination li a:hover {
  background-color: #FF6600;
}

.pagination::before {
  display: block;
  content: "test";
  position: absolute;
  top: 50px;
  width: 250px
  height: 3px;
  background-color: red; 
  z-index: -1;
}

<ul class="pagination">
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
</ul>

Отступ в 50px от верхнего края я задал просто для того что бы показать что все работает корректно.

Answer 2

Чтобы центрировать псевдоэлемент :before, Вы можете добавить ему автоматический отступ margin: auto; и добавить свойства позиционирования со значением 0, то есть right:0; left: 0;

А также помните, что центрировать псевдоэлемент можно относительно своего селектора, а не всей страницы, этого можно добиться, если добавить самому элементу position: relative;, а псевдоэлементу position: absolute;

Я добавлю свойству top значение 50px, чтобы применение стилей было наглядным, как сделал предыдущий отвечающий.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Visual Steps</title>
    <style>
    body{
      font-family: 'Roboto', sans-serif;
    }
    </style>
    <style>
     .pagination {
       text-align: center;
       margin-top: 120px;
       position: relative;
       padding: 0;
     }
    .pagination li{
       display: inline-block;
     }
    .pagination li a {
      color: white;
      float: left;
      padding: 8px 16px;
      text-decoration: none;
      background-color:#bdde38;
      margin-right: 8px;
      border-radius:100%;
      border:2px solid #cccccc;
     }

    .pagination li a:hover{
      background-color: #FF6600;
    }
    .pagination:before{
        content:"";
        width:250px;
        height:3px;
        margin: auto;
        position: absolute;
        top: 50px; left: 0; right: 0;
        background-color:#cccccc;
        z-index:-1;
    } 
    </style>
</head>
<body>
    <ul class="pagination">
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
    </ul>
</body>
</html>

БЛОГ НА HUSL

Как зафиксировать псевдоэлемент before по центру?

Ответы (2 шт):