반응형
오늘은 간단하게 highlight 효과를 만들어보겠습니다.
결과는 다음과 같습니다.
열심히 하자라는 문구에 highlight를 추가하였습니다.
소스 코드
- html
- h1태그와 내부에 strong 태그를 적용하였습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>하이라이트 강조 연습</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="./index.css" />
</head>
<body>
<h1 class="highlight_heading">
공부
<strong class="highlight">열심히 하자</strong>
</h1>
</body>g
</html>
- css
- strong 태그에 highlight 클래스를 적용한 후 가상요소를 적용해줍니다.
- bottom으로부터 7px위에 존재하게 되고, 혼합 형태를 multiply로 설정해주었습니다.
.highlight {
position: relative;
}
.highlight::after {
position: absolute;
right: 0;
left: 0;
bottom: 7px;
height: 8px;
mix-blend-mode: multiply;
background-color: #97fce5;
content: "";
}
반응형
'css' 카테고리의 다른 글
| css - flexbox(flex, flex-grow, flex-shrink, flex-basis) (0) | 2021.07.10 |
|---|---|
| css 스타일 구체성(명시도) - id, class, 기본요소, !important (0) | 2021.07.05 |
| 비밀번호 암호화 만들기(css, javascript) (0) | 2021.07.02 |
