css - content unterschiedlich gestalten

Status
Dieses Thema wurde gelöst! Zur Lösung gehen…

rernanded

Erfahrenes Mitglied
Hi

ich habe per css content: zwei Zeilen in meine Seite "eingebaut".
Mittels \A trenne ich die Zeilen voneinander.
Wie kann ich die oberste Zeile anders gestalten als die untere, hinsichtlich Schriftart, -grad und-farbe?
MONI

HTML:
#main-content-seite-1:before{
content: "''Sollen Sie doch!''\A M. Linne zu L. Minne.";
white-space: pre-wrap;
color: #ff5500;
background-color: #FFF;
font-size: 3em;
font-family: Lato;
border-radius: 30px;
position: absolute;
top: 33%;
left: 20%;
transform: rotate(-0deg);
-webkit-transform: rotate(-0deg);

}
 

basti1012

Erfahrenes Mitglied
Ich behaupte mal gar nicht.
Wie soll das auch gehen?
Vieleicht mit Javascript, doch alleine mit Css sehe ich da keine Chance.

Man müsste das mal in Live sehen .
Vielleicht könnte man dann ein Text in before und den anderen in after schreiben , dann könnte es klappen
 

basti1012

Erfahrenes Mitglied
Wenn dir das so reicht ist ja gut.
Wenn man das Live gesehen hätte , könnte man vielleicht auch andere Lösungen suchen.
Die Frage ist ja auch warum du das nicht gleich ins HTML schreibst und es übe before: und after: machst?
Da dir die Lösung anscheinend reicht , werde ich da auch nicht weiter nach harken.

Wie du siehst mit before und after kannst du 2 Texte unterschiedlich gestalten, aber anders sehe ich da keine Chance.
In Normalfall würde ich das ins HTML schreiben und dann so machen.
HTML:
<html>
<head>
<style>
*{
  margin:0;
  padding:0;
}
body{
    background:#123456;
    height:100vh;
    width:100vw;
    display:flex;
    justify-content:center;
    flex-direction:column;
    align-items:center;
}
body p{
    display:inline-block;
    border-radius: 30px;
    padding:3px 20px;
    margin-top:10px;
}
#text1{
    color:black;
    font-size: 4em;
    background:white; 
    font-family: Lato;
}
#text2{
    color:white;
    font-size: 3em;
    font-family: Lato;
    background:black; 
}
</style>
</head>
<body>
  <p id="text1">
     "''Sollen Sie doch!''"
  </p>
  <p id="text2">
    "M. Linne zu L. Minne."
  </p>
</body>
</html>


Kommt aber auch immer drauf an was du da genau vor hast , das weiß ich ja nicht.
 

rernanded

Erfahrenes Mitglied
@basti - ich habe da wenig zu melden da ich es so übernommen habe(von einem kollegen) mit der auflage es so umzusetzen. ich würde es auch anders machen, so wie du oben zuletzt. mach dir keinen kopf. MONI
 
Status
Dieses Thema wurde gelöst! Zur Lösung gehen…

Neue Beiträge