Löschen des Textumflusses mittels :after-Pseudo-Element - Quelltext - Cascading Style Sheets

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 <title>L&ouml;schen des Textumflusses mittels :after-Pseudo-Element - Cascading Style Sheets - Workshop Internet-Pr&auml;senz</title>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta http-equiv="Content-Language" content="DE" />
 <meta http-equiv="Content-Style-Type" content="text/css" />

 <meta name="description"
  content="&Uuml;bung Cascading Style Sheets. L&ouml;schen des Textumflusses mittels :after-Pseudo-Element." />
 <meta name="keywords" content="HTML, Cascading Style Sheets" />
 <meta name="author" content="Roland Unger" />

 <style type="text/css">
 <!--

  .clearer:after {
     display: block;
     content: ' ' ;
     visibility: hidden;
     height: 0;
     line-height: 0;
     background: transparent;
     color: #fff;
     clear: both;
     margin: 0;
  }

  img {
     float: right;
     padding-left: 1em;
  }

  p, ul {
     background: #ffffee;
  }

 -->
 </style>
</head>

<body>

<h1>Workshop Internet-Präsenz</h1>

<h2>Löschen des Textumflusses mittels :after-Pseudo-Element - Cascading Style Sheets</h2>

<p>Üblicherweise beendet man den Textumfluss mit
mit gesetzter clear-Eigenschaft des ersten, nicht
mehr umfließenden Tags. Es kann aber Gründe geben,
dies zum Ende des letzten noch umfließenden Elements
tun zu wollen:</p>

<ul>
 <li>das umflossene Element soll vollständig vom
  umfließenden eingebettet werden,</li>
 <li>das nachfolgende Element soll seinen oberen
  Rand beibehalten.</li>
</ul>

<p class="clearer"><img src="html_css_708.jpg" alt="Horus-Statue am Tempel zu Edfu" height="120" width="74" />
Hierfür sollen drei Lösungswege aufgezeigt
werden:</p>

<p>Die zweite Lösung nutzt das
:after-Pseudoelement, um den Textumfluss zu
beenden. Bei allem Reiz dieser Lösung – man
brauch das &lt;br&gt;-Tag nicht zu schreiben –,
es funktioniert nicht im Internet Explorer, da
er das :after-Pseudoelement nicht unterstützt.
Der obere Rand dieses Absatzes „verschwindet“
im leeren Bereich nach dem vorletzten Absatz;
ein Phänomen, mit dem man auch konfrontiert
werden würde, wenn man die clear-Eigenschaft
mit diesem Absatz verbinden würde.</p>

</body>
</html>