Wie der Titel schon sagt, ich bin auf Stil Hälfte eines <hr> versucht, von der anderen Hälfte, anders zu sein, wie folgt aus:Art Hälfte von <hr> anders als andere Hälfte
Wie Sie sehen können Die linke Hälfte der <hr> ist rot und etwas dicker als die dünne, graue Seite rechts. Möglich, dies mit CSS zu erreichen? Vielen Dank!
Für die <hr> Linie Sie das CSS :before Pseudoelement verwenden können, die unterschiedlich gefärbten Bereich (bitte ändern Farben und Größen Ihr Design paßt) zu machen:
hr {
background-color: #555;
border: none;
display: block;
height: 4px;
overflow: visible;
position: relative;
width: 100%;
}
hr:before {
background-color: #f90;
content: '';
display: block;
height: 8px;
left: 0;
position: absolute;
top: -2px;
width: 20%;
z-index: 1;
}<hr>Sie kann :before Pseudo-Element für die Hälfte hr verwenden und absolute Position verwenden.
hr {
position: relative;
border: none;
border-bottom: 1px solid #aaa;
overflow: visible;
}
hr:before {
position: absolute;
left: 0;
width: 50%;
content: '';
height: 3px;
background: red;
top: -1px;
}<hr>Sie können dies tun, mit: vor /: Nach Selektoren.
SCSS:
hr {
overflow:initial;
&:after {
content:'';
width:50%;
height:3px;
display:block;
background:red;
top:-2px;
position:relative;
}
}
Versuchen mit dieser Geige spielt ich für Sie erstellt: https://jsfiddle.net/fwzs8uy0/
Persönlich würde ich div statt HR verwenden.
hr ist in Ordnung für diesen Zweck;), Ihre Geige ist fehlerhaft.Am besten ist es, den vollständigen Code hier in einem Arbeits-Snippet zu veröffentlichen. –
Was ist los mit der Geige? Arbeit ist vollkommen in Ordnung für mich. – Matt
Ihre Uhr ist eine Box ein paar Pixel hoch mit einem dünnen Rand und einem weißen Hintergrund;) –
Sie können es mit zwei hr ‚s:
* {box-sizing:border-box}
hr:first-of-type {
height: 5px;
border: none;
background: red;
}
hr {
display: inline-block;
vertical-align: middle;
width: 50%;
}<hr><hr>mit flex i sehr einfach tun würde und box-shadow auf dem Pseudo verwenden, um diese Antwort von anderen unterscheidet;)
hr {display:flex;}
hr:before {
content:'';
width:50%;
box-shadow:0 0 0 3px rgb(146, 24, 53);
}
body {background:#333;color:rgba(124,153,246)}
code{font-size:1.5em;color:gold}<h1><code>FLEX</code> TEST ON <code>HR</code> PSEUDO</h1>
<hr>Verwenden Sie einen linearen Farbverlauf. Dies könnte Ihnen helfen.
hr {
border: 0;
height: 1px;
background: linear-gradient(to right, red, yellow);
}
Ja, das vor Pseudo ist genial. Aber hier ist eine andere Art und Weise können Sie verwenden, die Sie leicht jedes CSS Grid implementieren mit:
CSS:
.red{
border: 2px solid deeppink;
position: relative;
top: -1px;
}
HTML:
<div class="container">
<hr class="red col-sm-6" /><hr class="col-sm-6" />
</div>
Zwei Unterschied Minuten. Dang! – AlbertSamuel