I have a question about how to use css::before-CodePudding

footer .menu li::before {
  content: "";
  width: 3px;
  height: 3px;
  background-color: #555;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  right: -1px;
}

footer .menu li:last-child::before {
  display: none;
}

<footer>
  <div class="inner">
    <ul class="menu">
      <li><a href="javascript:void(0)" class="green">개인정보처리방침</a></li>
      <li><a href="javascript:void(0)">영상정보처리기기 운영관리 방침</a></li>
      <li><a href="javascript:void(0)">홈페이지 이용약관</a></li>
      <li><a href="javascript:void(0)">위치정보 이용약관</a></li>
      <li><a href="javascript:void(0)">스타벅스 카드 이용약관</a></li>
      <li><a href="javascript:void(0)">윤리경영 핫라인</a></li>
    </ul>
  </div>
</footer>

The result came out like this. However, I used ::before, so I think there must be a point before. Why is the result coming out like this?

I think

CodePudding user response：

It is using with position: absolute;. You should write left: -1px; because if you write right: -1px; then your this absolute block starts on the right side and do not forget that you should also use position: relative; for position: absolute;

CodePudding user response：

:before is an element that will be added before the target in html. But in your style, you set the position of it in absolute and you set the right to -1px

You just need to position it before the element with a left tag.

You could use a :not(:first-child) selector to prevent the :before to be generated for the first child of your list.

I've done an example :

.container {
    display: flex;
}

.foo {
    padding: 0 10px;
    position: relative;
}

.foo:not(:first-child):before {
    font-size: 30px;
    top: -5px;
    content: "·";
    display: block;
    position: absolute;
    left:-15px;
    margin: 0 10px;
}

<div class="container">
  <div class="foo">foo</div>
  <div class="foo">foo</div>
  <div class="foo">foo</div>
  <div class="foo">foo</div>
  <div class="foo">foo</div>
  <div class="foo">foo</div>
</div>