이 CSS 의사 요소는 요소 콘텐츠의 첫 번째 줄을 선택합니다. 단, 포함하는 텍스트의 너비가 고정되어 있지 않으면 창 크기에 따라 줄의 길이가 변경될 수 있습니다.
CSS ::first-line pseudo element −
의 예를 살펴보겠습니다.예시
<!DOCTYPE html>
<html>
<head>
<style>
p::first-line {
background-color: lightgreen;
color: white;
}
</style>
</head>
<body>
<h2>Lorem Ipsum</h2>
<p>Phasellus id ante turpis.Vestibulum luctus justo id odio iaculis condimentum. Vestibulum sapien mauris, feugiat id posuere vitae, condimentum blandit sapien.</p>
<div id="divDisplay"></div>
<script>
divDisplay.textContent = 'Current window width: '+window.innerWidth+'px';
window.addEventListener('resize', function() {
divDisplay.textContent = 'Current window width: '+window.innerWidth+'px';
})
</script>
</body>
</html> 출력
초기 창 너비 크기가 '606px'일 때 -
창 너비가 증가할 때 -
요소를 포함하는 텍스트의 너비가 고정되고 창 크기가 조정된 경우 -
CSS ::first-line pseudo element의 또 다른 예를 봅시다. -
예시
<!DOCTYPE html>
<html>
<head>
<style>
p::first-line {
background-color: #FF8A00;
color: white;
}
div{
width: 420px;
}
</style>
</head>
<body>
<div>
<h2>Demo Heading</h2>
<p>This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. </p>
<p>This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. </p>
</div>
</body>
</html> 출력
