Wartość none jest domyślną wartością właściwości text-decoration-line.
Domyślnie tekst elementu HTML nie posiada żadnej dodatkowej linii dekoracyjnej.
text-decoration-line:none;
tekst tego elementu "div" nie posiada żadnej dodatkowej linii dekoracyjnej
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
div {
padding:1em;
font-size:1.3em;
background-color:#7DCDE8;
}
</style>
</head>
<body>
<div>
tekst tego elementu "div" nie posiada żadnej dodatkowej linii dekoracyjnej
</div>
</body>
</html>
Za pomocą wartości underline właściwości text-decoration-line możemy sprawić, że do tekstu interesującego nas elementu HTML zostanie dodana dodatkowa linia dekoracyjna typu underline. Linia dekoracyjna typu underline znajdzie się pod tekstem elementu HTML.
text-decoration-line:underline;
tekst tego elementu "div" posiada dodatkową linię dekoracyjną typu "underline", ponieważ do tego elementu "div" została dodana właściwość "text-decoration-line" wraz z wartością "underline"
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
div {
text-decoration-line:underline;
padding:1em;
font-size:1.3em;
background-color:#7DCDE8;
}
</style>
</head>
<body>
<div>
tekst tego elementu "div" posiada dodatkową linię dekoracyjną typu "underline", ponieważ do tego elementu "div" została dodana właściwość "text-decoration-line" wraz z wartością "underline"
</div>
</body>
</html>
Za pomocą wartości overline właściwości text-decoration-line możemy sprawić, że do tekstu interesującego nas elementu HTML zostanie dodana dodatkowa linia dekoracyjna typu overline. Linia dekoracyjna typu overline znajdzie się nad tekstem elementu HTML.
text-decoration-line:overline;
tekst tego elementu "div" posiada dodatkową linię dekoracyjną typu "overline", ponieważ do tego elementu "div" została dodana właściwość "text-decoration-line" wraz z wartością "overline"
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
div {
text-decoration-line:overline;
padding:1em;
font-size:1.3em;
background-color:#7DCDE8;
}
</style>
</head>
<body>
<div>
tekst tego elementu "div" posiada dodatkową linię dekoracyjną typu "overline", ponieważ do tego elementu "div" została dodana właściwość "text-decoration-line" wraz z wartością "overline"
</div>
</body>
</html>
Za pomocą wartości line-through właściwości text-decoration-line możemy sprawić, że do tekstu interesującego nas elementu HTML zostanie dodana dodatkowa linia dekoracyjna typu line-through. Linia dekoracyjna typu line-through przekreśli tekst elementu HTML.
text-decoration-line:line-through;
tekst tego elementu "div" posiada dodatkową linię dekoracyjną typu "line-through", ponieważ do tego elementu "div" została dodana właściwość "text-decoration-line" wraz z wartością "line-through"
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
div {
text-decoration-line:line-through;
padding:1em;
font-size:1.3em;
background-color:#7DCDE8;
}
</style>
</head>
<body>
<div>
tekst tego elementu "div" posiada dodatkową linię dekoracyjną typu "line-through", ponieważ do tego elementu "div" została dodana właściwość "text-decoration-line" wraz z wartością "line-through"
</div>
</body>
</html>
Za pomocą kombinacji kilku (oddzielonych od siebie znakiem spacji) wartości należących do właściwości text-decoration-line możemy sprawić, że do tekstu interesującego nas elementu HTML zostanie dodanych kilka dodatkowych linii dekoracyjnych różnego typu jednocześnie.
Podana przez nas kombinacja wartości właściwości "text-decoration-line" nie może zawierać wartości none oraz wartości globalnych.
text-decoration-line:underline overline;
tekst tego elementu "div" posiada dodatkową linię dekoracyjną typu "underline" oraz dodatkową linię dekoracyjną typu "overline" jednocześnie, ponieważ do tego elementu "div" została dodana właściwość "text-decoration-line" wraz z następującą kombinacją wartości: "underline overline"
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
div {
text-decoration-line:underline overline;
padding:1em;
font-size:1.3em;
background-color:#7DCDE8;
}
</style>
</head>
<body>
<div>
tekst tego elementu "div" posiada dodatkową linię dekoracyjną typu "underline" oraz dodatkową linię dekoracyjną typu "overline" jednocześnie, ponieważ do tego elementu "div" została dodana właściwość "text-decoration-line" wraz z następującą kombinacją wartości: "underline overline"
</div>
</body>
</html>
