How to Incorporate an Anchor Link into a Div as well as its Pseudo Element using CSS, Javascript, or jQuery

How can I make both the menu item and its icon clickable as a link? When either is clicked, the link should work.

Here is a CodePen example: http://codepen.io/emilychews/pen/wJrqaR

The red square serves as the container for the icon that will be used.

The CSS code is:

CSS

.menu {
    position: relative;
    left: 50px;
    top: 50px;
    height: 30px;
    width: 100px;
    background: blue;
    line-height: 30px;
    text-align: center;
}

.menu:before {
    content:'';
    position: absolute;
    width: 100%;
    height: 100%;
    background: red;
    bottom: 40px;
    right: 0px;
}

.menu-item1 a { color: white; text-decoration: none; }

HTML

<div class="menu menu-item1"><a href="//google.com">Menu Item</a></div>

I would appreciate any assistance. Thanks!

Emily.

javascriptjquerycssanchorpseudo-element

Answer №1

.box {
  position: relative;
  display: inline-block;
  left: 50px;
  top: 50px;
  height: 30px;
  width: 100px;
  background: blue;
  line-height: 30px;
  text-align: center;
  color: white; 
  text-decoration: none;
}

.box:before {
  content:'icon';
  position: absolute;
  width: 100%;
  height: 100%;
  background: red;
  bottom: 40px;
  right: 0px;
}
<div class="menu">
  <a href="//google.com">Google</a>
  <a href="//yandex.com">Yandex</a>
</div>

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

Retrieve tag, custom taxonomy, and attachment information using the get_pages function

Currently, I have implemented code that retrieves all pages submitted by the currently logged-in author using the get_pages function. The retrieved result is then passed to Javascript via Ajax. Everything functions as expected, and the correct pages are be ...

javascriptphpajaxwordpress

What is the best way to invoke my Python function within my JavaScript file?

I am facing an issue with using my Python function in JavaScript. Although the actual code I am working on is more complex, I have simplified it to demonstrate the problem below: main.mjs dbutils.notebook.run("./aPythonFile.py", 5, {"parame ...

javascriptpythondbutils

Display the previous item I chose

When using jQuery to display an overview of user selections from a large section of select tags, I am facing an issue. Despite changing my selection multiple times, the code continues to show all previous selections along with the most recent one. This can ...

jqueryselect

Maximizing Performance: Enhancing Nested For Loops in Angular with Typescript

Is there a way to optimize the iteration and comparisons in my nested loop? I'm looking to improve my logic by utilizing map, reduce, and filter to reduce the number of lines of code and loops. How can I achieve this? fill() { this.rolesPermiAdd = ...

javascriptangulartypescriptspring-bootnested-loops

Text loaded dynamically is not remaining within the div

I am experiencing an issue with dynamically loaded content where Images work fine, but Links and Text are not displaying properly. For reference, you can view the problem in this JSFiddle: http://jsfiddle.net/HRs3u/1/ I suspect that it might be related t ...

jquerycssdynamicappend

Displaying the focus icon on the active tab using Angular Material

I am currently utilizing Angular material to dynamically generate tabs in my HTML code. I'm trying to display a drop arrow icon on the active or selected tabs, but I am facing some challenges with the implementation. Below is the code snippet I have ...

javascriptangularangular-materialangular8

Animating path "d" with ReactJS and SVG upon clicking in FireFox

Visit this CodePen for more: https://codepen.io/sadpandas/pen/xxbpKvz const [currentScreen, setCurrentScreen] = React.useState(0); return ( <React.Fragment> <div> <svg className="theSvg" width="156" height="6 ...

javascriptcssreactjssvgonclick

Integrating webpack with kafka-node for seamless communication between front

I am in the process of embedding a JavaScript code that I wrote into an HTML file. The script requires kafka-node to function properly, similar to the example provided on this link. To achieve this, I am using webpack to bundle everything together. I am fo ...

javascriptnode.jsnpmwebpack

When utilizing the yo angular-fullstack:endpoint, the message endpoint fails to produce the message.socket.js

Hey there, I've encountered an issue where the yo angular-fullstack endpoint shopPacket is not generating the shopPacket.socket.js file. I attempted to update the yo angular full stack generator, but unfortunately, the problem persists. yo angular-f ...

javascriptnode.jsexpressyeomanangular-fullstack

If the div element is present on the page, incorporate additional class and attributes to enhance its functionality

Similar Question: How to add new class and attributes to div if it exists on the page I am in search of JavaScript code that can be implemented on my master page. This code should check for the existence of a specific div, and if found, it should add ...

c#javascriptjquery

Identify the specific element that activated the MutationObserver across multiple elements

After exploring a helpful Stack Overflow post, I discovered that it is feasible to monitor multiple elements using a single MutationObserver object. In order to track the text of two specific elements on a website, I crafted the following script: var secon ...

javascriptmutation-observers

Protractor - Error: prop is undefined

Need assistance in identifying an error. Currently, I am learning Protractor and attempting to create a basic test using Page Object. //login_pageObject.js let loginContainer = function() { this.usernameInput = $("input.login-form-01"); this.passwordInp ...

javascriptprotractorpageobjects

Attempting to generate an absolute Xpath for the Add button, which is a subelement

I'm struggling to locate the Add button on our website, which I am in the process of automating using Python and WebDriver. Despite trying various Xpath suggestions without success, I've consulted with the developer who informed me that the butto ...

pythoncssxpathselenium-webdriverwebdriver

Interactive search tool with multiple fields using HTML and JavaScript

I need help developing a search box for structured data, where I want to implement two types of typeahead searches: one for fields and another for values within those fields. The image below illustrates what I am aiming for. https://i.sstatic.net/MRsJ2.png ...

javascriptjqueryhtmlsearch-box

Utilizing the HTML button element within an ASP file combined with JavaScript can lead to the reloading of the

I am attempting to create a JavaScript function for an HTML button element. However, I have noticed that it causes the page to reload. Strangely, when I use an input with a button type, everything works perfectly. What could be causing this issue and why a ...

javascriptasp.nethtml

Enhancing Octahedron Geometry in Three.js: Incorporating Materials Array

Is it possible to apply different materials to each face of a THREE.OctahedronGeometry? I have successfully done this with box objects, but when I try with THREE.OctahedronGeometry, I only see the first material on all faces. How can I achieve this with ...

javascriptthree.js

Is there a way to eliminate the legend symbol for just one legend in Highcharts?

Looking to customize a legend in Highcharts but facing limitations due to Plot Lines and Bands not having legends. To work around this, I have added an empty series that acts as a toggle for showing/hiding plot lines. Since my plot lines are vertical, I im ...

javascriptvue.jshighcharts

C#: Issues with loading static content in MVC on various environments with IIS

Within my C# MVC 4.5 Website, I recently introduced a new folder to host CMS-type applications separately from the main site. While everything seemed fine during local testing, issues arose after deploying the updates to the DEV environment. A closer look ...

c#cssasp.netasp.net-mvciis

Enhancing code branch coverage using Istanbul

The code snippet provided has a branch coverage of only 50% (refer to the coverage report below). I am unsure how to enhance this as there are no if statements present. I suspect that Istanbul must utilize some form of measurement that I have yet to grasp ...

javascriptangularjscode-coverageistanbul

Using forEach in React to simultaneously set multiple properties and return destructured output within the setState function

The following is the initial code snippet: setRows((rows) => rows.map((row) => selected && row.node === selected.id ? { ...row, row.a: "", row.b: "", row.c: "" } ...

javascriptreactjstypescriptreact-typescript