CSS에서 수평선으로 화살표를 구현하는 방법-프런트엔드 Q&A-php.cn

CSS에서 수평선으로 화살표를 구현하는 방법

青灯夜游

풀어 주다： 2022-04-25 18:58:20

원래의

4954명이 탐색했습니다.

방법: 1. 빈 요소를 정의합니다. 2. "::before" 및 내용을 사용하여 수평선을 삽입합니다. 구문은 "Element::before{content:"——"}"입니다. :after" 및 Content는 "Element::after{content:">"}" 구문을 사용하여 화살표를 삽입합니다.

CSS에서 수평선으로 화살표를 구현하는 방법

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

css는 수평선이 있는 화살표를 구현합니다

구현 방법:

빈 요소 정의(예: 콘텐츠를 포함하지 않는 범위 태그)
:before 선택기를 사용하고 수평선을 삽입할 콘텐츠 속성
화살표를 삽입하려면 ::after 선택기와 콘텐츠 속성을 사용하세요

구현 예:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        span::before{
content: "——";
}
span::after{
content: ">";
}
p::before{
content: "<";
}
p::after{
content: "=";
}
    </style>
</head>
 
<body>
    <span></span>
<p></p>
</body>
 
</html>

로그인 후 복사

CSS에서 수평선으로 화살표를 구현하는 방법

설명: ::before selector 및 ::after selector

:: 이전 선택기는 선택한 요소 앞에 콘텐츠를 삽입합니다.

::after 선택기는 선택한 요소 뒤에 콘텐츠를 삽입합니다.

::before 선택기와 ::after 선택기 모두 삽입할 콘텐츠를 지정하기 위해 content 속성을 사용해야 합니다.

확장된 지식: 콘텐츠의 사용 시나리오

콘텐츠 정의에서는 :before 및 :after 의사 요소와 함께 사용된다고 언급했습니다. :before 및 :after는 가장 일반적인 의사 요소이며 모든 사람이 이에 대해 잘 알고 있어야 합니다.

:before 및 :after에 대한 간략한 소개:

기본 표시: 인라인
콘텐츠 속성을 설정해야 합니다. 그렇지 않으면 유효하지 않습니다.
기본 사용자 선택: 없음, 즉, 콘텐츠 :before 및 :after는 사용자가 사용할 수 없습니다. 선택됨
은 dom을 통해 사용할 수 없습니다. 이는 자체적으로 존재하지 않는 페이지 요소를 HTML 소스 코드에서 찾을 수 없지만 시각적으로 볼 수 있음을 의미합니다.

주요 사용 시나리오를 살펴보겠습니다.

문자 삽입

문자를 삽입하기 위해 콘텐츠를 사용하면 일반적으로 입력의 자리 표시자 속성과 유사하게 빈 요소에 대한 기본값이 설정됩니다. 요소에는 내용이 없습니다.

<p>有内容的段落</p>
<p></p>

<!--:empty 是一个 CSS 选择器，当元素里面无内容的时候进行匹配-->
p:empty::before {
  content: &#39;空元素内容&#39;;
  color: red;
}

로그인 후 복사

효과는 다음과 같습니다.

CSS에서 수평선으로 화살표를 구현하는 방법

보조 요소 생성

이때 핵심은 내용이 생성된 내용이 아니라 의사입니다. 요소 자체. 보통 우리는 콘텐츠를 넣습니다. 속성 값은 빈 문자열로 설정되고 다른 CSS 코드는 도우미 요소를 생성하거나 그래픽 효과를 얻거나 특정 레이아웃을 얻는 데 사용됩니다.

그래픽 효과

익명 대체 요소를 삽입하려면 ::after 의사 요소를 사용하고, 콘텐츠를 비워 두세요. 이 요소에는 콘텐츠가 없으며, CSS 스타일을 사용하여 원하는 그래픽 효과를 얻을 수 있습니다. 코드는 다음과 같습니다:

<div class="content-box"></div>

.content-box {
  height: 100px;
  width: 200px;
  border-radius: 10px;
  position: relative;
  background: #fff;
}
.content-box::after {
  content: &#39;&#39;;
  position: absolute;
  top: 100%;
  right: 16px;
  width: 4px;
  height: 16px;
  border-width: 0;
  border-right: 12px solid #fff;
  border-radius: 0 0 32px 0;
}

로그인 후 복사

효과는 다음과 같습니다:

CSS에서 수평선으로 화살표를 구현하는 방법

Clear the float

Clear the float 주로 상위 요소의 내부 높이가 0이 되는 문제를 해결하기 위해 코드는 다음과 같습니다.

<div class="info-box clear">
  <div class="left">左</div>
  <div class="right">右</div>
</div>

.clear::after {
 content: &#39;&#39;;
 display: block;
 clear: both;
}

로그인 후 복사

위의 세 가지는 필수입니다.

content: '': ::after를 통해 요소에 빈 의사 요소를 추가합니다.
clear: 둘 다: 요소의 어느 쪽도 부동되지 않도록 부동을 제거합니다.
display: block:clear는 블록 수준 요소에만 적용됩니다.

요소를 추가하여 플로트를 지우고 BFC를 터치하여 요소의 높이가 하위 상자의 높이에 맞춰질 수 있도록 합니다.

이미지 생성

URL 기능을 직접 사용하여 이미지를 표시할 수 있습니다. 텍스트 앞뒤에 이미지를 추가할 수 있고 텍스트를 직접 바꿀 수도 있습니다.

그림이 텍스트를 직접 대체합니다.

<p class="img-test">文字</p>

.img-test {
  display: block;
  height: 20px;
  width: 20px;
  border-radius: 100%;
  content: url(&#39;../assets/test2.jpg&#39;);
}

로그인 후 복사

텍스트 앞뒤에 그림을 추가합니다.

<!--方案一 -->
.img-test::after {
  content: url(&#39;../assets/test2.jpg&#39;);
}

<!--方案二 -->
.img-test::after {
  content: &#39;&#39;;
  display: block;
  height: 20px;
  width: 20px;
  background: url(&#39;../assets/test2.jpg&#39;);
}

로그인 후 복사

첫 번째 계획에서는 의사 요소가 콘텐츠를 통해 그림을 설정합니다. 표시되는 사진은 원본 크기로 상대적으로 흐릿합니다. 일반적으로 Scheme 2의 배경 이미지를 사용하며 크기는 필요에 따라 설정할 수 있습니다.

attr 속성 값 콘텐츠 생성

attr을 사용하여 효과를 얻으려면 일반적으로 태그 연결을 가져오는 데 사용됩니다.

<a class="baidu-link" href="https://baidu.com"> 百度一下，你就知道!</a>

.baidu-link::after {
  content: " (" attr(href) ") "
}

로그인 후 복사

효과는 다음과 같습니다. :

CSS에서 수평선으로 화살표를 구현하는 방법

(학습 영상 공유: css 영상 튜토리얼, 웹 프론트엔드)

위 내용은 CSS에서 수평선으로 화살표를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!