When hovering, the output always displays as "1IPSUM". However, adding a ':before' element with 'content:"1"' results in the output before hover being "11"
The desired output is:
while hovering, display "IPSUM"
Fiddle Link: https://jsfiddle.net/Zxdfvv/u9xgoks3/
.btn:hover:after {
padding-bottom: 200px;
content:"IPSUM";
}<div class='btn'>1</div>When you set the content: for a pseudo-element, it is applied to the pseudo-element itself and not the actual element. This is why adding content to ::before places it before the text of the element, while using ::after will place it after the text.
To set the initial text using pseudo-elements as well, you can try the following approach:
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
body {
background-color: #006400;
display: grid;
place-items: center;
}
main {
padding: 1em;
display: flex;
flex-direction: column;
gap: 1em;
}
.btn {
border: 3px solid black;
text-align: center;
border-radius: 20px;
letter-spacing: 2px;
padding: 1em 1.5em;
background-color: #ffd700;
color: black;
font-family: monospace;
display: inline-block;
margin: 1em;
}
.btn::after {
display: inline-block;
}
.btn--empty::after {
content: "";
}
.btn--pseudo::after {
content: "lorem";
}
.btn:hover::after {
content: "ipsum";
}<html>
<body>
<main>
<a class="btn btn--empty" href="#"></a>
<a class="btn btn--pseudo" href="#"></a>
</main>
</body>
</html>Hey EmSixTeen, thanks a bunch! I'm currently away studying at University so unfortunately I can't access my account. Do Pseudo elements function consistently across various web browsers?
Within my original webpage, there is a script that I have created: <script> var marcoemail="aaaaaa"; function pippo(){ document.getElementById("marcoemailid").innerHTML=marcoemail; } window.onload = pippo; </script> The issue a ...
What is the best way to dynamically update a DOM element's class and styling in response to specific conditions or events occurring in a .gsp file? ...
My CSS grid timeline is currently generating around 1300 divs, causing performance issues. Is there a way to style or interact with the empty nodes without rendering all of them? I also want each cell to be clickable and change color on hover. Any suggest ...
While working on an MVC program, I encountered an issue when trying to send data from a TextArea to the controller upon a button click. Everything worked fine until I had HTML-based data inside the TextArea. Here's a snippet of the HTML code: <te ...
Experience a dynamic modal element that springs to life with just the click of a button or an image. The magic lies in the combination of HTML, CSS, and jQuery code: <div id="modal-1" class="modal"> <div class="button modal-button" data-butto ...
When I type !, it should show up like in the image. However, it's not working. Could it be because Visual Studio Code got an update? Or did I make a mistake on my end? I found a workaround by using html:5, but I'm still curious to know if this ...
I am currently working on integrating websocket functionality into my web application using PHP and as an extension for Yii. This will allow me to create a notification system similar to what I have in mind. My starting point is the code available at the ...
Unfortunately, Internet Explorer does not support the <blink> tag or the text-decoration:blink; style in CSS. Are there any alternative methods for creating blinking text in IE? ...
I require assistance. This situation is absolutely absurd. Currently, I am utilizing Komodo IDE version 7.1.2 and Firefox version 15.0.1. The HTML5 file that I created looks like this: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" ...
I am new to django and seeking assistance. I have developed a website but it's not fully operational yet. The model I created looks like this; from django.db import models class InductiveSensors(models.Model): Part_No = models.CharField(max_lengt ...
I am currently in the process of revamping my category archive to resemble a grid layout by utilizing custom CSS. I have successfully eliminated the elements I desired using code like this: .archive .entry-footer { display: none; } Now, I only have t ...
Looking for advice on how to expand the dropdown width? I have a row with two columns and some JavaScript that handles the dropdown functionality. The issue I'm facing is that I can't figure out how to adjust the dropdown width when it's se ...
Even though I've positioned the style.css file after Bootstrap, it still isn't working. Upon inspection, I noticed that... https://i.sstatic.net/ay621.png How can I solve this issue? .bg-info{ background-color: #17a2b8 !important; } ...
One thing I wanted to ask is about the importance of ordering CSS tags. After some research, I found out that it is indeed crucial to order them correctly. However, what I couldn't figure out from the responses I found was exactly HOW to do this. My s ...
Is there a way in JavaScript to make a <div> slide in from the right when hovered over, without relying on jQuery or other libraries? I'm looking for a modern browser-friendly solution. const div = document.querySelector('.fro ...
I have recently implemented Panels from Bootstrap 3 with the older version of Twitter-Bootstrap. My challenge lies in adding the well class to the panel body, as it results in excessive padding. This was not an issue when using BS3, leading me to believe ...
I am facing an issue with my React table configuration. I have set up scrollable columns and header following a similar example here: https://codesandbox.io/s/kowzlm5jp7?file=/index.js:281-310 In the table styles, I have specified a height like this: ...
I am new to Java script and I am trying to create a video player where users can click on the progress bar to place markers. Can you please review my code below and let me know if there are any errors? index.html <!doctype html> <html> <he ...
<html> <head> <style> table,td {border:1px solid black ;} table {width : 80% ;height:80%;} .top {vertical-align:top}; .center {vertical-align: middle}; .bottom {verti ...
I'm currently working on a modal using Mui Modal and I've encountered an issue. Everything seems to be functioning correctly until I add more items to the cart. When the minHeight exceeds 500, it stops at 100vh and only displays 5 items, even if ...