Here is the code I have for the specific page shown in the screenshot:
https://i.sstatic.net/57o2Z.jpg
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;
}
Since updating to jquery mobile 1.4.2, the alignment of jquery validate error messages for <input id="field1" type="text" class="required" /> appears incorrect. To see the issue, visit this Fiddle ...
I'm currently working on a website that can be found at this temporary link: The main banner of the site features a background image with fading text, which looks great on standard desktop screens. However, when viewed on wider screens like 1600x1200 ...
I am attempting to implement this function within my dark-colored footer: import Typography from '@material-ui/core/Typography'; function Copyright() { return ( <Typography variant="body2" color="textSecondary" align="center"> ...
I am currently facing an issue with my website. I would like to create a search button using the symbol from fontawesome (<i class="fas fa-search"></i>), but I am unsure how to replace the form submission button with this symbol in order to sub ...
I've designed a custom checkbox where the actual checkbox is hidden and a label is styled to look like a checkbox. Everything works fine, however, when I add a label, it doesn't align properly. Here's the link to the fiddle: http://jsfiddle ...
After coming across a question with no answer that suited my needs, I decided to share the solution I created. In my case, I had a hidden generated list on a page which was initially set with a CSS height of "0" and then expanded upon clicking by transit ...
Is it possible to work with 2 .json files simultaneously? My attempt did not succeed, so I am looking for an alternative method. If you have a suggestion or know the correct syntax to make this work, please share. And most importantly, does the second .j ...
// App.js import './App.css'; function App() { return ( <div className='navbar'> <label className="hamburger-menu"> <input type="checkbox" /> </label> <div class ...
I'm currently working on enhancing the accessibility of a slider that will be featured on my website. The goal is to create an effect where, after clicking (or pressing enter) on the first slide, the focus shifts to the second slide element, allowing ...
Feeling a bit perplexed here. I'm working on creating a page to showcase images. My goal is to have 5 images displayed per row, with maximum spacing when the window is at its widest (~950 px). However, as the window size decreases, I want the images t ...
Seeking guidance on integrating animated 3D models onto a webpage using THREE.js. Currently, I have successfully loaded a static 3D model named 'aaa.gltf' with auto rotation and orbit control functionality. However, when trying to load another an ...
Exploring the development of a swipe-to-action list component. <div class="list-container"> <div class="row"> <div class="content"> Sample Content 1 </div> <div class="action"> ...
Trying to build two versions of my website: one for mobile devices or small browsing windows, and another for large browser windows. Looking to link HTML to different style sheets based on browser size. Current attempt in code only addresses total screen ...
FOUND THE SOLUTION. Sending a huge shoutout to @JHeth and @Marko Vucurovic for their invaluable help! This query may seem lengthy, but the concept is straightforward. Let's break it down into 2 scenarios: Scenario I <html> <head><titl ...
Can you please refer to this question: Issue with Aspect Ratio of Images in Bootstrap 5 due to Padding After applying the h-100 solution, everything looks great on Chrome. Unfortunately, when I check it in Safari, the aspect ratio of the image gets distor ...
https://i.stack.imgur.com/e48Kf.jpgI am attempting to navigate to the second link that has the class = "TabLink_tab__uKOPj" from selenium import webdriver from selenium.webdriver.support.ui import Select from selenium.webdriver.support.ui import WebDrive ...
Is there a way to customize the alignment of the bootstrap navbar drop-down? Currently, the drop down menu always starts from the right corner. I would like to set a specific starting point for the drop-down. You can view an example in this Fiddle. When ...
I attempted to modify the margin of a label using em/rem units instead of px (refer to the image attached to this question), but I am unsure where to apply the styles for proper structuring. I have checked the MUI documentation but couldn't find infor ...
#section1 { display: block; } #section2 { display: none; } #container:hover > #section2 { display: block; } <div id="container"> <div id="section1">Section1</div> <div id="section2">Section2</div> </div> ...
I searched everywhere on the internet but couldn't find a solution. If anyone knows of a similar link to my question, please share it with me. I am trying to achieve a design similar to Windows icons and file names in HTML using CSS. Please refer to ...