CSS псевдоэлементы

Последнее обновление 8 мая 2019 11:58:21 (UTC / GMT +8 часов)

script1adsense2code

script1adsense3code

псевдоэлементы

Псевдоэлементы CSS выбирают элементы не по их именам, а по форматированию этих элементов.

Например, если вы хотите установить стиль для первой строки или первой буквы элемента (скажем, абзаца), вы не можете сделать это, просто выбрав элемент p . В этих случаях вам нужно использовать псевдоэлемент CSS .

Псевдоэлементы CSS всегда начинаются с ":".

синтаксис:

 elementName: CSS_Pseudo_element {CSS-свойство: значение; ........................}

CSS: псевдоэлемент первой строки

CSS: псевдоэлементы первой строки используются для описания стиля первой строки HTML-элемента.

Пример CSS: псевдоэлемент первой строки

Код CSS:

p:first-line {
text-transform: uppercase; 
}

HTML код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Example of CSS first line pseudo element </title>
<link rel='stylesheet' href='Example-of-CSS-first-line-pseudo-element.css' type='text/css'>
</head>
<body>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit. Integer malesuada tempus enim nec rhoncus. Aenean tempus adipiscing porttitor.</p>
</div>
</body>
</html>

Посмотрите этот пример псевдоэлемента первой строки CSS в отдельном окне браузера.

CSS: псевдоэлемент первой буквы

CSS: псевдоэлементы первой буквы используются для описания стиля первой буквы элемента HTML.

Пример CSS: псевдоэлемент из первой буквы

Код CSS:

p:first-letter {
text-transform: uppercase; /* to set the first letter in uppercase */ 
color: red; /* to set the first letter in red */
font-size: 32px; /* to set the first letter size 32px */
}

HTML код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Example of CSS first letter pseudo element </title>
<link rel='stylesheet' href='Example-of-CSS-first-letter-pseudo-element.css' type='text/css'>
</head>
<body>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit. Integer malesuada tempus enim nec rhoncus. Aenean tempus adipiscing porttitor.</p>
</div>
</body>
</html>

Посмотрите этот пример псевдоэлемента с первой буквой CSS в отдельном окне браузера.

CSS: до и: после псевдоэлементов

CSS: before псевдоэлемент используется для генерации контента перед HTML-элементом.

CSS: псевдоэлемент after используется для генерации контента после HTML-элемента.

Код CSS:

 h1:before {
content: url("/images/arrow1.png")
}
h2:after {
content: url("/images/green-tick.png")
}

HTML код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Example of CSS before and after pseudo elements</title>
<link rel='stylesheet' href='Example-of-CSS-before-and-after-pseudo-elements.css' type='text/css'>
</head>
<body>
<h1>w3resource tutorials</h1>
<h2>w3resource CSS examples </h2>
</body>
</html>

Посмотрите этот пример CSS: before и: after псевдоэлементов в отдельном окне браузера.

Предыдущая: CSS псевдо-классы
Далее: CSS свойства фона