Änderungen:
@media only screen
- schaltet das Vorlesen des Asterix ab.- Umbruch mittels float.
- Wirklich genau so getestet...
<!doctype html>
<html>
<style>
label {
display: block;
float: left;
margin-right:2rem;
}
label span {
display: inline-block;
width: 8rem;
}
@media only screen {
label[x-required] span::after {
content: '*) ';
}
}
</style>
<form>
<fieldset><legend>Mindestangaben:</legend>
<label x-required><span>Gib was ein:</span>
<input required>
</label>
<label x-required><span>Gib was ein:</span>
<input required>
</label>
<label x-required><span>Gib was ein:</span>
<input required>
</label>
</fieldset>
<fieldset><legend>Optionale Angaben:</legend>
<label><span>Gib noch was ein:</span>
<input required>
</label>
<label><span>Gib noch was ein:</span>
<input required>
</label>
<label><span>Gib noch was ein:</span>
<input required>
</label>
</fieldset>
</form>
</html>