CSS 의사 요소 전후는 HTML 요소 전후에 스타일을 추가하는 방법입니다. 이 두 CSS 의사 요소는 주로 장식 요소를 추가하거나 텍스트에 추가 스타일을 추가하는 데 사용됩니다. 이 기사에서는 CSS 의사 요소의 사용 전후를 살펴보고 몇 가지 실제 예를 제공합니다.
1. CSS 의사 요소 전후의 사용법
구문은 다음과 같습니다.
选择器:before{ content: ""; /* 插入内容 */ 属性:属性值; } 选择器:after{ content: ""; /* 插入内容 */ 属性:属性值; }
그 중 선택자는 장식 요소를 삽입해야 하는 요소 선택자를 말하며, 전후는 의사 요소입니다. 위 구문에서 content 속성의 값은 콘텐츠(예: 텍스트, 그림 등)를 삽입하는 데 사용됩니다. 또한 전후의 의사 요소는 색상, 배경, 테두리 등과 같은 다른 스타일 속성을 사용할 수도 있습니다.
2. 텍스트 접두사 및 접미사 추가
CSS 의사 요소의 가장 일반적인 용도 중 하나는 텍스트에 접두사와 접미사를 추가하는 것입니다. 예를 들어, 아래와 같이 의사 요소를 사용하여 텍스트 앞에 작은 아이콘을 배치할 수 있습니다.
HTML 코드:
<p>下面是一些列表项:</p> <ul> <li>CSS</li> <li>HTML</li> <li>JavaScript</li> </ul>
CSS 코드:
li:before{ content: url('icon.png'); margin-right: 5px; }
이런 방식으로 앞에 작은 아이콘을 추가할 수 있습니다. 목록 항목의
텍스트 뒤에 내용을 추가하기 위해 after에 의사 요소를 사용할 수도 있습니다. 예를 들어 HTML 테이블의 각 테이블 셀에 "/" 기호를 추가할 수 있습니다. 코드는 다음과 같습니다.
HTML 코드:
<table> <tr> <td>苹果</td> <td>橘子</td> <td>香蕉</td> </tr> </table>
CSS 코드:
td:after{ content: "/"; margin-left: 5px; }
3 슬라이더 만들기
CSS 의사- 슬라이더를 만드는 데에도 사용할 수 있습니다. 예를 들어 슬라이딩 애니메이션이 포함된 슬라이더 버튼을 만들 수 있으며 코드는 다음과 같습니다.
HTML 코드:
<button class="slider">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>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 중국어 웹사이트의 기타 관련 기사를 참조하세요!