CSS 의사 요소 사용 전후에 대한 심층 토론

CSS 의사 요소 전후는 HTML 요소 전후에 스타일을 추가하는 방법입니다. 이 두 CSS 의사 요소는 주로 장식 요소를 추가하거나 텍스트에 추가 스타일을 추가하는 데 사용됩니다. 이 기사에서는 CSS 의사 요소의 사용 전후를 살펴보고 몇 가지 실제 예를 제공합니다.

1. CSS 의사 요소 전후의 사용법

구문은 다음과 같습니다.

选择器:before{ content: ""; /* 插入内容 */ 属性:属性值; }
选择器:after{ content: ""; /* 插入内容 */ 属性:属性值; }

그 중 선택자는 장식 요소를 삽입해야 하는 요소 선택자를 말하며, 전후는 의사 요소입니다. 위 구문에서 content 속성의 값은 콘텐츠(예: 텍스트, 그림 등)를 삽입하는 데 사용됩니다. 또한 전후의 의사 요소는 색상, 배경, 테두리 등과 같은 다른 스타일 속성을 사용할 수도 있습니다.

2. 텍스트 접두사 및 접미사 추가

CSS 의사 요소의 가장 일반적인 용도 중 하나는 텍스트에 접두사와 접미사를 추가하는 것입니다. 예를 들어, 아래와 같이 의사 요소를 사용하여 텍스트 앞에 작은 아이콘을 배치할 수 있습니다.

HTML 코드:

<p>下面是一些列表项：</p>

  
• CSS
  
• HTML
  
• JavaScript

CSS 코드:

li:before{
  content: url('icon.png');
  margin-right: 5px;
}

이런 방식으로 앞에 작은 아이콘을 추가할 수 있습니다. 목록 항목의

텍스트 뒤에 내용을 추가하기 위해 after에 의사 요소를 사용할 수도 있습니다. 예를 들어 HTML 테이블의 각 테이블 셀에 "/" 기호를 추가할 수 있습니다. 코드는 다음과 같습니다.

HTML 코드:

                    

苹果

橘子

香蕉

CSS 코드:

td:after{
  content: "/";
  margin-left: 5px;
}

3 슬라이더 만들기

CSS 의사- 슬라이더를 만드는 데에도 사용할 수 있습니다. 예를 들어 슬라이딩 애니메이션이 포함된 슬라이더 버튼을 만들 수 있으며 코드는 다음과 같습니다.

HTML 코드:

<button>Slide to Unlock</button>

CSS 코드:

.slider{
  width: 200px;
  height: 50px;
  border: none;
  background-color: #0084FF;
  color: #FFF;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  font-size: 1.2em;
}
.slider:before{
  content: "";
  display: block;
  position: absolute;
  width: 50px;
  height: 50px;
  background: #FFF;
  top: 0;
  left: -5px;
  border-radius: 50%;
  transform: translateX(-100%) rotate(45deg);
  animation: slider 1s infinite;
}
@keyframes slider{
  0%{
    transform: translateX(-100%) rotate(45deg);
  }
  50%{
    transform: translateX(100%) rotate(45deg);
  }
  100%{
    transform: translateX(-100%) rotate(45deg);
  }
}

4. 귀 효과 만들기

CSS 의사의 또 다른 일반적인 사용 전후 요소 가장 좋은 방법은 모따기 효과를 만드는 것입니다. 예를 들어, 웹 사이트의 홈페이지 제목에서 개귀 효과를 만들기 위해 전후에 의사 요소를 사용할 수 있습니다. 코드는 다음과 같습니다:

HTML 코드:

<h1 id="Welcome-to-My-Website">Welcome to My Website</h1>

CSS 코드:

h1{
  position: relative;
  text-align: center;
  color: #FFF;
  background-color: #0084FF;
  padding: 20px;
  margin: 0;
}
h1:before, h1:after{
  content: "";
  position: absolute;
  bottom: -20px;
  border: 20px solid transparent;
}
h1:before{
  border-top-color: #0084FF;
  left: 0;
}
h1:after{
  border-top-color: #0084FF;
  right: 0;
}

위 이전과 이후에 CSS 의사 요소를 여러 번 사용했습니다. 텍스트에 접두사와 접미사를 추가하든, 슬라이더 버튼을 만들든, 귀 모양 효과를 만들든 상관없이 전후의 CSS 의사 요소는 웹 사이트에 새로운 시각적 요소를 추가할 수 있습니다. 이렇게 하면 HTML 코드를 추가하지 않고도 스타일과 레이아웃을 변경할 수 있어 웹사이트를 시각적으로 더욱 매력적으로 만들 수 있습니다.

위 내용은 CSS 의사 요소 사용 전후에 대한 심층 토론의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!