<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>inline_text_decorations</title>
<link rel="stylesheet" href="../shared.css" />
</head>
<body style="width: 1200px; height: 630px">
<div
style="
display: block;
width: 100%;
height: 100%;
background-color: rgb(255, 255, 255);
padding-top: 40px;
padding-right: 40px;
padding-bottom: 40px;
padding-left: 40px;
font-size: 48px;
"
>
<span
style="
display: inline;
text-decoration-line: underline line-through;
text-decoration-style: solid;
text-decoration-color: rgb(0, 0, 255);
text-decoration-thickness: 4px;
"
>Hello World</span
><span
style="
display: inline-block;
background-color: rgba(255, 0, 0, 0.501961);
vertical-align: text-bottom;
"
>Woah</span
>
<div
style="
display: inline-block;
background-color: rgba(0, 0, 255, 0.501961);
font-style: italic;
vertical-align: middle;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
"
>
<span style="display: inline-block; background-color: rgb(255, 255, 0)">It works right</span
><span style="display: inline-flex; background-color: rgb(0, 128, 0)">A flexbox!</span>
</div>
<span
style="
display: inline;
color: rgb(255, 0, 0);
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-color: currentColor;
text-decoration-thickness: auto;
"
>
Red Underline</span
>
</div>
</body>
</html>