Verstecken Sie einen Text über CSS

Ich arbeite an einer Website über WordPress und aus irgendeinem Grund kann ich die CSS bearbeiten, aber nicht die HTML, und ich möchte etwas Text, aber nicht alles davon ausblenden. Der Code ist:Verstecken Sie einen Text über CSS

.entry-header .entry-title::after { 
 
    content: "Create Theme" !important; 
 
}

<header class="entry-header "> 
 
    <h1 class="entry-title "> 
 
      "Create Course" 
 
      ::after 
 
     </h1> 
 
</header>

Welche zeigt: Create CourseCreate Theme. Und ich möchte es anzeigen: Create Theme. Ist das möglich durch CSS?

Quelle

2016-08-25 Jon Smith

ich die Wurzel des Problems finden würde, zuerst - anstatt Hacks finden Sie Ihr Problem zu lösen. * WARUM * können Sie den HTML-Code nicht bearbeiten? Berechtigungen? Kein HTML für die betreffende Seite zu bearbeiten? Ich hatte vorher eine schlechte Erfahrung mit einer WP-Seite, wo es keinen HTML-Code in der Homepage gab - jemand war gegangen und habe alles in eine Vorlage gestellt! Dies wurde irgendwo unter der Haube der Template-Einstellungen der Seite versteckt. Wenn möglich, versuche das tiefere Problem zu lösen, das du hast :) –

Dies könnte ein wenig hässlicher Hack, aber Ihre Situation bedenkt, wenn Sie die HTML nicht ändern können Sie mit text-indent zu verstecken, den ursprünglichen Text und dann überschreibt die text-indent des Mutter display: block; auf dem nach Pseudo indem Elemente spielen könnten wie dies:

.entry-header .entry-title { 
 
    text-indent: -9999px; 
 
} 
 

 
.entry-header .entry-title::after { 
 
    text-indent: 0px !important; 
 
    display: block; 
 
    float: left; 
 
    content: "Create Theme"; 
 
}

<header class="entry-header "> 
 
    <h1 class="entry-title ">Create Course</h1> 
 
</header>

Quelle

2016-08-25 11:39:30 thepio

Danke! Das hat funktioniert :) –

Ich bin froh zu helfen! :) – thepio

@JonSmith - nicht schmieden, um als "akzeptiert" zu markieren, wenn möglich, wenn diese Antwort Ihr Problem gelöst hat :) –

Wenn Sie denken, die visibility ist in Ordnung, versuchen JSFiddle:

.entry-header .entry-title { 
    visibility: hidden; 
} 
.entry-header .entry-title::after { 
    content: "Create Theme" !important; 
    visibility: visible; 
}

Das Problem ist, dass der Text entry-title immer noch den Raum belegen wird.

Referenz: Hide element, but show CSS generated content

Quelle

2016-08-25 11:40:30 Joy

Verstecken Sie einen Text über CSS

Antwort

Verwandte Themen