Conceal content using CSS styling

Currently, I am in the process of designing a website using WordPress. Oddly enough, I find myself able to make changes to the CSS but not the HTML. Specifically, I am trying to hide certain text without hiding all of it. Here is the code snippet in question:

.entry-header .entry-title::after {
  content: "Create Theme" !important;
}
<header class="entry-header ">
  <h1 class="entry-title ">
            "Create Course"
            ::after
        </h1>
</header>

The current output is: Create CourseCreate Theme. However, my goal is for it to display as: Create Theme. Can this be achieved through CSS?

htmlcsswordpress

Answer №1

If you find yourself unable to modify the HTML directly, here's a little trick you can use to work around it. You can use the text-indent property to hide the original text and then override it using the display: block; setting on the after pseudo element. This way, you can achieve the desired effect without altering the original HTML code:

.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>

Answer №2

If you believe the visibility is functioning correctly, experiment with it on JSFiddle:

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

The issue arises when the text entry-title still takes up space.

For more information, visit Hide element, but show CSS generated content

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Learn the process of seamlessly playing multiple video files in an HTML format

I am working with multiple video files and I need them to play continuously. The goal is to seamlessly transition from one video to the next without any interruptions on the screen. Below is my current code snippet: -HTML <button onclick="playVi ...

javascripthtml

Achieve equal height columns when they are stacked vertically using Bootstrap 5

Can columns be equal height when they become rows on mobile devices? <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="57353838232423253627176279677965">[email protected]</ ...

cssbootstrap-5

Flexbox design that adapts responsively to display 3 items per row, shifting to 2 items and finally

I have a segment with six elements. For desktop, I would like to display 3 items per row; for medium devices, 2 items per row; and for mobile devices, only 1 item per row. <div class="flex-container"> <div>1</div> <div>2</d ...

htmlcssflexbox

What is the reason for the jquery datatable never being reinitialized?

I've been struggling to get this right, but unfortunately, I keep failing. The issue arises when I call the filltblServicesReport function, which is primarily responsible for initializing the database. Initially, it works perfectly fine; however, upon ...

javascripthtmlajaxasp.net-mvcdatatables

Troubleshooting: Issue with Deleting Table Rows using MySQL and PHP

I am having trouble deleting a table row from my database using MySQL and PHP. Despite reviewing my code, I cannot identify the issue. I believe that I am close to resolving the problem, likely something simple that I am overlooking. When hovering over th ...

phphtmlmysqlsql

Dynamic selection of elements using a parameterized variable in JQuery

Having some trouble with the following line of code: alert($('input' + ' #' + $id_bici).attr('value')); Here is the corresponding HTML code snippet: <input type="hidden" id="id_bici1" name="id_bici1" value="9"> ...

javascriptjqueryhtml

Having issues with the right margin in HTML5 canvas and struggling to remove the scroll bar

I am struggling with adjusting the margins of my canvas to ensure equal spacing on both sides without any horizontal scroll bars. Desired Outcome: Equal margin on both sides of canvas without any horizontal scroll bars. Issue: The margin-right property i ...

javascriptcsshtmlcanvas

Some pages are experiencing a lack of visibility of Tinymce buttons

Currently, I am utilizing the tinymce plugin for image upload and it is functioning properly on one specific page. However, on a different page, there is a sidebar located on the left side while the main content area is positioned on the right side. The t ...

jqueryhtmlcsstwitter-bootstraptinymce

Upon executing `$('div')`, an empty array is returned

My goal is to retrieve all the div classes on a page using jQuery $('div');. However, the page does not natively support jQuery, so I am loading it through external links until $ === jQuery evaluates to true. Even on Stack Overflow where jQuery ...

javascriptjqueryhtmlgoogle-chrome

Is there a way to ensure the website's menu bar remains on a single line?

I'm currently working on a website and running into an issue with the menu bar. Everything looks perfect, but on larger screens or Android devices, the "Contact Us" menu item sometimes jumps to a new line unexpectedly. If you visit the webpage and tr ...

css

Creating a segmented button utilizing HTML, CSS, and Bootstrap

To create a segment button using only HTML, CSS, and Bootstrap, refer to the example in the image below. It's important to understand the difference between toggle and segment buttons. A toggle button switches states on click, while a segment button c ...

htmlcssbootstrap-4

Resizing background images to their original size using jQuery

Can anyone help me figure out the actual size in pixels of a background image that is being displayed? <style> body { background-image: url(background.jpg); background-size: contain; } </style> I tried using jQuery to get the size of ...

jquerycssbackgroundsize

Angular Template Check isn't being performed/Change detector is not functioning

I am having issues with Change Detection in my Angular template. I am attempting to change the color of the first div based on text changes in the second div (textbox). Here is the code snippet: <div [ngStyle]="{'background-color': titleT ...

htmlangularangular2-changedetectionangular-ivy

Using setTimeout with drag and drop functionality in HTML

I need a setTimeout function to be triggered only after dragging and dropping an image into a division, not before the drop occurs. ...

javascriptphphtmlweb

Injecting sinon js into an application within an iFrame: a step-by-step guide

I am looking to implement ajax requests testing in my application. The application is running within an iframe, and my goal is to have the iframe's wrapper page test the application using sinon (which will send the response). I attempted to include ...

javascriptajaxhtmliframesinon

The absence of jQuery is causing an error in the Twitter Bootstrap code

I am encountering an issue where I am receiving an error message stating that jQuery is not defined. My intention is to utilize both twitter bootstrap and jQuery-UI in my project. In the <head> section, I have included all the necessary CSS and JS fi ...

javascriptjqueryhtmlcsstwitter-bootstrap

When YII_DEBUG is disabled, the CSS will not be implemented

My website is built using Yii along with YiiBooster. Everything works fine when I am in DEBUG mode - all styles load and apply correctly. However, when I set YII_DEBUG to false in the index.php file, the CSS files still show as loaded in Firebug, but it ap ...

phpcsstwitter-bootstrapyiiproduction-environment

Having trouble retrieving the toDataURL data from a dynamically loaded image source on the canvas

Currently, I am working on a project that involves a ul containing li elements with images sourced locally from the "/images" folder in the main directory. <section class="main"> <ul id="st-stack" class="st-stack-raw"> ...

javascriptjqueryhtmlcanvastodataurl

An alternative method for adjusting the width of text input fields in CSS without using

Is there a CSS alternative to the calc function that can be used for older browsers (such as the default Android browser) in order to dynamically set the width of input text fields while leaving space on the right for a submit button? This is my current C ...

htmlcss

ajax clock encounters net::ERR_INSUFFICIENT_RESOURCES error

I recently set up an ajax php clock, but I keep encountering numerous net::ERR_INSUFFICIENT_RESOURCES errors in my console. Can anyone shed some light on why this might be happening? Below is the code responsible for calling out the clock function: $(docu ...

phpajaxwordpressconsoleconsole.log