>source

이 컨테이너에는 텍스트와 이미지가 마지막 요소로 포함되어 있습니다. ::after 그러나 컨테이너의 마지막 요소가 아닌 이미지 위에 표시됩니다.

의사 선택기를 설정할 수 없다는 것을 이해합니다. <img/> ,하지만 여기서 설정하고 있습니다. ::after 컨테이너에 제대로 작동하지 않는 이유를 알 수 없습니다.

왜 이런 일이 일어나고 어떻게 만들 수 있습니까? ::after 실제로 마지막 요소 testDiv ?

추신 컨테이너 또는 부모 요소를 설정할 수 없습니다. position: relative , 내가 필요하기 때문에 ::after 화면과 너비가 같고 컨테이너 내부에 맞추기 위해서가 아니라 화면과 너비가 같은 요소가 없습니다.

추신 그만큼 margin-left:100px 스 니펫에서 더 쉽게 볼 수 있도록하기위한 것이므로 내 목적에는 중요하지 않습니다.

.testDiv > div::after {
  position: absolute;
  height: 2px;
  content: "";
  background-color: red;
  left: 0;
  right: 0;
}
.testDiv > div {
  margin-left: 100px;
}

<div class="testDiv">
    <div>
      <h1>TEST</h1>
      <h2>TEST</h2>
      <img src="https://www.acmetek.com/wp-content/uploads/rapidssl-logo.png" />
    </div>
</div>

  • 답변 # 1

    귀하의 의견을 감안할 때

    It doesn't solve my problem, since I need the ::after to have the width of the screen and not only of the container

    설정해야합니다. position:relative ...에 .testDiv 부모 및 추가 bottom:0width:100% 의사 요소에

    .testDiv {
      position: relative
    }
    .testDiv>div {
      margin-left: 100px;
    }
    .testDiv>div::after {
      position: absolute;
      height: 2px;
      content: "";
      background-color: red;
      left: 0;
      bottom: 0;
      width: 100%
    }
    
    

    <div class="testDiv">
      <div>
        <h1>TEST</h1>
        <h2>TEST</h2>
        <img src="https://www.acmetek.com/wp-content/uploads/rapidssl-logo.png" />
      </div>
    </div>
    
    

    업데이트-귀하의 의견에 따라

    당신은 둘 중 하나가 필요합니다 bottom: (any value)(any unit you need) 또는 top: (any value)(any unit you need)

    .testDiv>div::after {
      position: absolute;
      height: 2px;
      content: "";
      background-color: red;
      left: 0;
      bottom: 50px;
      width: 100%
    }
    
    

    <div class="testDiv">
      <div>
        <h1>TEST</h1>
        <h2>TEST</h2>
        <img src="https://www.acmetek.com/wp-content/uploads/rapidssl-logo.png" />
      </div>
    </div>
    
    

  • 답변 # 2

    여전히 사용할 수 있습니다. position:relative 그러나 요소가 양쪽에서 오버플로되도록하십시오.

    .testDiv > div::after {
      position: absolute;
      height: 2px;
      content: "";
      background-color: red;
      left: -100vw; /* big value here */
      right: 0;
      bottom:0;
      box-shadow: 100vw 0 0 red; /* big value here too*/
    }
    .testDiv > div {
      margin-left: 100px; /* we have a margin */
      width:200px; /* and a width too */
      position:relative;
    }
    
    

    <div class="testDiv">
        <div>
          <h1>TEST</h1>
          <h2>TEST</h2>
          <img src="https://www.acmetek.com/wp-content/uploads/rapidssl-logo.png" />
        </div>
    </div>
    <div class="testDiv">
        <div>
          <h1>Another one </h1>
          <h2>TEST</h2>
          <img src="https://www.acmetek.com/wp-content/uploads/rapidssl-logo.png" />
        </div>
    </div>
    
    

관련 자료

  • 이전 permalinks : Eleventy에 영구 링크가 없습니다.
  • 다음 javascript - vuejs에서 배열을 테이블 행으로 나열하는 올바른 형식