Here is the code I have for the specific page shown in the screenshot:
I want to change 'Replay course' to 'Access course'. Can anyone help me figure out what I'm missing?
a.course-card__resume {
display: none;
}
a.course-card__resume:after {
content: 'Access Course';
}
To modify content using CSS alone is not possible; access to the HTML code or knowledge of JavaScript is necessary.
Below is a CSS workaround that involves adding an additional tag to your HTML:
a span {
display:none;
}
a::after {
content:'Access Course';
}<a href="#"><span>Replay Course</span></a>If you have the capability to include JS code, refer to the following solution:
document.getElementsByClassName("course-card__resume")[0].innerText = "Access Course";<a href="#" class="course-card__resume">Replay Course</a>Your complete code has not been provided, so ensure compatibility with this approach. This method utilizes the visibility CSS property alongside absolute positioning requirements:
a {
visibility:hidden;
position:relative;
}
a::after {
content:'Access Course';
visibility:visible;
position:absolute;
left:0;
}<a href="#">Replay Course</a>Have you experimented with this code snippet?
a.course-card__resume:after {
content: 'Access Course';
display: block;
}
Disappearing an element using display:none also hides its dependent elements. If you want to maintain the visibility of a specific element while hiding another, consider this approach:
a.course-card__resume {
visibility: hidden;
}
a.course-card__resume:after {
content: 'Access Course';
visibility: visible;
}
Twice I have inserted the font Acumin Pro Condensed, once with a weight of 400 and again with a weight of 700. I attempted to use both weights separately; assigning the 400 weight to an h3 tag and the 700 weight to an h2 tag. However, only the 700 font we ...
I am trying to figure out how to create a function that will only show content for the specific element in which my button is located. Currently, when I click the button it shows content for all elements with the 'one' class, but I want it to dis ...
I am in need of assistance to implement an accordion menu with unique picture icons for each item on the left and a toggle icon (such as + or a chevron) on the right side. Visually, I would like it to resemble this design (https://codepen.io/kathykato/pen ...
I'm curious about the support for flexbox on Kindle devices and looking for more information on overall support. It seems that some properties like display:flex and flex-wrap:wrap/nowrap are not supported, at least on older Kindle Fire devices (newer ...
How can I dynamically select and manipulate groups of elements? My intention is to select and modify the msgpvtstyleme elements, then select the msgpvtstyle elements separately and work with them as well. The ultimate goal is to apply classes to these grou ...
Can you create a checkbox with a minus "-" symbol inside using just html and css? I attempted to achieve this with JavaScript by using: document.getElementsByTagName("input")[0].indeterminate = true; However, the requirement is to accomplish this using ...
We have developed a large React application without relying on any existing UI framework. All of our UI components have been custom-built. Now, we are looking to make the landing page section responsive within the application, which will require the imple ...
I found this helpful resource for integrating Google Maps into my Ionic app. Everything is working smoothly, but I am trying to make the map fill the remaining height below the header. Currently, I can only set a fixed height in pixels like this: .angula ...
I found myself in a confusing situation where using :last-child is affecting how parent classes are being applied. The task at hand is to style the last element in a list of elements. However, upon using :last-child, the priority of styles shifts and one ...
I'm currently working on a react website, and I'm facing an issue with the image display on the single product page. Despite trying to tweak both the react and CSS code, I haven't been able to resolve the problem. Below is my react file: im ...
Has anyone experienced issues with adding comments in a textarea field? It seems to work fine with the "input" element, but not with "textarea". Any advice on how to resolve this? This is how the HTML element appears before clicking: <textarea class=&a ...
As someone who is new to web development, I am embarking on the journey of building a UI Grid that can effectively display a large amount of data. My goal is to implement a scrollbar that allows for horizontal scrolling across approximately 1,000,000 data ...
I am working with a table that is rendered by DataTable, and I have the requirement to dynamically append new elements inside the table like this: The dark grey area represents the new DOM elements that need to be inserted dynamically. The first row cont ...
How can I use jQuery to edit the :after element created by CSS? <div class="box"> <h3 class="social">Social</h3> <ul> <li><a href="https://www.youtube.com/" onmou ...
I am currently working on an animation project using JavaScript and canvas. I have a reference fiddle where objects are generated randomly and fall from the top right corner to the bottom left corner, which is fine. However, the issue is that the objects a ...
My website is displaying differently on Safari compared to Firefox. I want the CSS to make it look consistent across both browsers. I understand that I could use two div boxes - one for the outline and one for the image. However, I prefer how Firefox only ...
Having an issue that I have attempted to simplify in this StackBlitz example (the actual project is created with Angular components and Bootstrap, etc.): https://stackblitz.com/edit/angular-bootstrap-4-starter-njixcw When incorporating a dropdown within ...
Looking for help with displaying news on your CMS page? You may have encountered an issue trying to show the title and content in two columns within a row. Here is some CSS code that might guide you in the right direction: *{ margin:0; padding:0; ...
I am currently working on a React application that utilizes Material-UI enhanced table, which is based on react-table. I have been trying to customize the styling of their rows. According to the documentation (https://material-ui.com/api/table-row/), it s ...
Encountering a white error screen when attempting to add an item using a form in Python / Django. I'm currently debugging the issue but lacking information. Any guidance on where to look next would be greatly appreciated. Models.py from __future__ i ...