errday
81
2020-06-24 13:35:20
4
239

CSS after 정렬에서 해매고 있습니다


위 이미지 처럼 만들려고 합니다.


flex,float를 해봤는데 잘 못한건지 안움직이고 밑에만 있습니다 ㅠㅠ


<h1>RESOURCES</h1>에 ::after를 만들고

 background-image: linear-gradient로 선을 만들었습니다.



after css입니다


.article__title-letter::after {

  display: block;

  width: 100%;

  content: "";

  height: 50px;

  background-image: linear-gradient(

    180deg,

    transparent,

    transparent 6.25%,

    black 0,

    black 25%,

    transparent 0,

    transparent 40%,

    black 0,

    black 59%,

    transparent 0,

    transparent 75%,

    black 0,

    black 93.75%,

    transparent 0,

    transparent 0

  );

}



0
  • 답변 4

  • EmDev
    139
    2020-06-24 13:39:37

    display: block


    이것 때문에 선이 아래로 내려가는거 아닐까요..??

  • 개선
    143
    2020-06-24 13:55:18

    block요소라 리소스 라는 요소가 100%넓이를갖고있어서 내려가는거에요

  • Tae-woong
    3
    2020-06-24 13:56:20

    https://jsfiddle.net/gdko6s9q/
    참고하세유  float 뒤에 오는 엘리먼트를 overflow를 visible이 아닌 값으로  설정하면 floating context가 해제되고 남은영역을 block안에 width 값으로 확보할 수 있습니다. 단 여기서 width는 반드시 auto로 해주셔야 합니다.

  • errday
    81
    2020-06-24 15:09:59

    EmDev님 답변 감사드립니다. 지난번 문의글에서도 답변 주셨는데 또 도와주셨내요! 감사합니다!


    개선님 답변 감사드립니다. 무작정 만들어보면서 공부해보자 하고 있는데 ^^; 기본적인걸 모르고 있었내요

    Tae-woong님 답변 감사드립니다. 답변내용 참고해서 공부해보겠습니다

  • 로그인을 하시면 답변 을 등록할 수 있습니다.