Is it possible to retrieve the URL when a link is clicked using CSS alone, without relying on JavaScript or jQuery?
Is it possible to retrieve the URL when a link is clicked using CSS alone, without relying on JavaScript or jQuery?
If you want to highlight clicked anchor-targets in your CSS, you can use the :target-pseudo-class. This targets anchors that are clicked with a URL ending in a #.
For instance, if you call index.php#paragraph1, it will match:
<p id="paragraph1">…</p>
You can apply styling like this in your CSS:
:target { background: #fc0; }
If you want to achieve highlighting similar to what is seen on SO, you can do something like this:
[id] {
-webkit-transition: background-color 2s ease;
-moz-transition: background-color 2s ease;
-o-transition: background-color 2s ease;
transition: background-color 2s ease; }
[id]:target {
background-color: #ffa;
color: #6a0504; }
To show the URL of a clicked anchor, you can use:
a[href]:active::after {
content: ' (' attr(href) ')';
/* more stylings */
}
One issue I'm facing is that whenever I click on a link in NextJS, it directs me to the middle of the page: <Link href={`/products/${id}`} key={id}> <a> {/* other components */} </a> </Link> I believe the problem l ...
In the current scenario, focusing on the button in Safari 13.0.5 does not display the outline until a repaint is forced (such as changing screen size). This issue does not occur in other browsers. Are there any workarounds or hacks to ensure the outline ...
I'm currently handling an OSCommerce website, and I'm trying to figure out why this issue is occurring. You can view the website at this link: The layout looks completely different on Internet Explorer, and I'm puzzled as everything should ...
For the past year, the multicolumn css3 property has grown in popularity among different browsers. It's a good reason to consider implementing it on your website for improved design and readability. I decided to take it a step further and incorporate ...
Is it possible to make a select (dropdown list) element fill out 100% of the table cell height? I was successful in getting it to work in Firefox and Chrome, but unfortunately not in IE (Internet Explorer). Here is the test HTML code: <table> & ...
Css: .woocommerce-placeholder.wp-post-image { content: url("DSC0926-1.jpg"); } /*for firefox*/ .woocommerce-placeholder.wp-post-image::before { content: url("DSC0926-1.jpg"); } HTML <img src="placeholder.png" alt="Placeholder" class="woocomm ...
Struggling to center an h3 heading in the middle of an image within a grid? Look no further, as I have 3 images across one row - four columns per image/heading. Check out the desired layout https://i.stack.imgur.com/8VFRt.png I've managed to center t ...
In a row within my inline form, I have both an email input and a dropdown. However, after resizing the page, the text within the dropdown is no longer positioned correctly (text on the left, arrow on the right). I attempted to fix this by using: text-alig ...
My attempt to modify the props of a material-ui Grid component using styled-components was not successful. I initially tried: const NavGrid = styled(Grid)` direction: 'row'; ` Unfortunately, this approach did not yield the desired result. T ...
Currently grappling with some code, unfortunately cannot easily paste the problematic part here as I am unsure of its exact location. Here's the situation: there is a div containing text that needs to be selectable, however, there is another div with ...
I have a layout with three columns using col-md-4 for a thumbnail design, and then I have another page with col-md-8. In both cases, I need to display an image. Should I use the same image for both layouts or would it be best to have two separate images, e ...
On the webpage, there is a table containing 11 checkboxes. I am looking to create a keyword that allows testers to input just 1, 2, or 3 to select a specific checkbox without needing multiple lines of element variables. Here are the elements: xpath=(//in ...
I need some assistance with my chat functionality. I want to prevent users from sending empty messages, so I want to make the input field required. Can you please help me with this? I have already tried adding "required='required'" to the input ...
As I work on constructing a website, I wonder how WordPress allows its admin users to edit CSS styles through the website instead of accessing the css file directly via FTP. How exactly does WordPress load the CSS file? My assumption is that it somehow re ...
I'm currently working on incorporating a CSS arrow on top of a Google map as a design element. The concept involves a horizontal stripe with a downward arrow placed halfway through, and I aim to have this arrow overlay the Google map. Here is a snipp ...
Below is a very basic code example to consider: <div id="parent"> <div id="child"> Test it </div> </div> This code snippet includes the following CSS styles: #parent{ position:relative; margin-left:200px; color:#FFF; } #chi ...
I'm currently working with Angular Material and I have a navigation bar (shown below). I've placed a md-menu inside the nav bar in order to create a dropdown menu on the right side, similar to Bootstrap's navigation bar. How can I relocate t ...
I've implemented a hover effect on the menu for my one-page website. When a user hovers over a navigation link on desktop, the color changes to #ed1c28. .nf-navbar .navbar-collapse a:hover { color: #ed1c28; } Additionally, when a user clicks on a ...
I am attempting to create a seamless loop of a single arrow within a div. My approach involves using two SVG arrows in such a way that when the top part of the first arrow is hidden, the corresponding section of the second arrow should be displayed. This ...
I'm attempting to add an <img> tag in front of a <div> similar to this example on JSFiddle. However, I have a specific requirement to only display the bottom left quarter of the image instead of the entire one. HTML Markup <div id="my ...