CSS 밑줄 (underline) 커스텀, 편리한 css generator 추천

밑줄을 그어야 할 때 CSS의 text-decoration을 이용해 밑줄을 긋고 커스텀이 가능하다.

https://www.digitalocean.com/community/tutorials/css-text-decoration

Customize Underlines with text-decoration in CSS | DigitalOcean

위 사이트에 다양한 예시가 나와있다.

CSS에 기본적으로 존재하는 underline 속성인 double,wavy,line 등을 커스텀 해서 위와 같이 예쁘게 만들 수 있다.

나는 티스토리 블로그 글의 소제목들에 밑줄 효과를 주고 싶었는데 이상하게 다양하게 시도 해 보아도 컬러 속성이 먹히지 않았다.

그래서 underline 속성을 다루는 대신 background 를 이용해 밑줄과 비슷한 효과를 주었다.

 

아래 사이트에서 이러한 css 를 만들 수 있다.

 

https://underline-generator.netlify.app/

Underline Generator

그라데이션, 밑줄 위치, 두께를 조절하고 오른쪽의 복사 버튼을 누르면 클립보드에 복사 된다.

 

      .fancy-undeline {
        background-image: linear-gradient(120deg, #2193b0,#6dd5ed 100%);
        background-repeat: no-repeat;
        background-size: 100% 0.4em;
        background-position: 0 90%;
        transition: background-size 0.25s ease-in;
      }

      .fancy-undeline:hover {
        background-size: 100% 88% !important;
      }

다음과 같이 CSS가 만들어진다.

만들어진 예시 처럼 따로 효과를 주고싶은곳에 class를 붙여도 되지만, 나는 그냥 h태그들에 한번에 적용시키도록 한번에 넣었다.

 

.permalink>.content .contents_style div[data-ke-type=moreLess] h2,
.permalink>.content .contents_style>h2,
.permalink>.content .contents_style div[data-ke-type=moreLess] h3,
.permalink>.content .contents_style>h3,
.permalink>.content .contents_style div[data-ke-type=moreLess] h4,
.permalink>.content .contents_style>h4,
.permalink>.content .contents_style div[data-ke-type=moreLess] h2 a,
.permalink>.content .contents_style>h2 a,
.permalink>.content .contents_style div[data-ke-type=moreLess] h3 a,
.permalink>.content .contents_style>h3 a,
.permalink>.content .contents_style div[data-ke-type=moreLess] h4 a,
.permalink>.content .contents_style>h4 a {
  color: #000000;
  background-image: linear-gradient(120deg, #1FA2FF,#12D8FA,#A6FFCB 100%);
  background-repeat: no-repeat;
  background-size: 100% 0.3em;
  background-position: 0 100%;
  transition: background-size 0.25s ease-in;
  display: inline-block;
}

복사하면 기본적으로 size가 100%로 정해지는데 h태그들은 block 태그라서 글자 범위를 벗어나도 밑줄이 그어지게 된다.

글자가 있는 부분만 밑줄을 추가하고 싶다면 해당 태그의 display 속성을 inline-block으로 바꿔주면 된다.