Striking a line through the hyperlink tag

I am attempting to create a crossed-out line above the content of an a tag for decorative purposes. The line should stretch across the entire width without intersecting with the actual text within the tag.

This is my desired outcome:

This is my current progress:

a {
  background: none;
}

a::after {
  content: "";
  border: 3px solid #000;
  display: block;
  position: relative;
  top: -50%;
}
<a class="fw-bold" href="">Explore Services</a>

Here is the jsfiddle link for the code above https://jsfiddle.net/68fkvhcw/

Why does the use of relative positioning and negative margin not produce the desired result?

htmlcss

Answer №1

If you're looking for a way to achieve this, one approach could be to encompass the a tag around all the elements, set it as a flex container, and apply styles similar to what I've included in the snippet below:

html,
body {
  margin: 0;
}

a.link1:link,
a.link1:visited {
  text-decoration: none;
  font-size: 24px;
  color: green;
}

.link1 {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  background: #dfd;
  padding: 6px 10px;
}

.text1 {
  flex-grow: 0;
  display: inline-block;
}

.line {
  height: 2px;
  background: #fa0;
  flex-grow: 1;
  margin: 0 20px 0;
}
<a class="link1" href="#">
  <div class="text1">Explore all Services</div>
  <div class="line"></div>
</a>

Answer №2

After working on your request, I have successfully crafted a code snippet for you. However, I'd like to offer a suggestion to avoid applying styles directly to the <a> tag as it may impact all other <a> tags throughout the page. Instead, I've introduced a new style class called .my_underline.

This enables you to easily modify the line thickness and font color according to your preferences.

 .my_underline {
    overflow: hidden;
    text-decoration: none;
    font-size: 2rem;
    font-weight: bold;
    color:aqua;
}

 .my_underline:after {
    content:"";
    display: inline-block;
    height: 0.5em;
    vertical-align: bottom;
    width: 100%;
    margin-right: -100%;
    margin-left: 10px;
    border-top: 1px solid black;
}
<a class="fw-bold my_underline" href="">Explore all Services</a>

Answer №3

Implement these CSS styles to enhance the appearance of your links: 

a {
color: #000000;
font-family: 'collegeregular';
font-size: 20px;
margin-left: 5px;
position: relative;
width: 93%;
}

a::after {
position: absolute;
content: "";
height: 2px;
background-color: #242424;
width: 50%;
margin-left: 15px;
top: 50%;
}
<a class="fw-bold" href="">Explore Services</a>

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

What could be the reason for my CSS selector with :target not functioning properly?

I tried to implement the instructions I found online for using :target, but it's not working as expected. My goal is to change the background color and font color of #div1 when the first link is clicked, and to change the border of #div2 when the seco ...

htmlcss

Dropdown search menus are failing to appear in the correct location

I have 4 dependent search dropdown menus side by side. There are two issues I am facing: Whenever I type in any of the drop-down menus, the MySQL-connected lists appear but not directly beneath the actual 'input-type-search-box'. Additional ...

phpjavascripthtmlcssajax

Sliding background in a multi-column accordion

I've hit a roadblock with this project. I'm working on setting up a FAQ section that needs to display its items in two columns on desktop, each with a drop shadow effect using Bootstrap 4. I've experimented with Flexbox and CSS columns with ...

htmlcssgridaccordion

Bug with the animation of height in Jquery

Unfortunately, I can't share my entire source code here because it's quite lengthy. However, maybe someone can provide some insight into a common issue that may be happening elsewhere. The problem I'm facing is with a DIV element that has r ...

jqueryhtmlcssanimation

Text in gray overlaying image background

I am attempting to design a layout that resembles the following: Although I can create the letter "A" using svg or clip-path, my challenge lies in maintaining the background inside the "A" aligned with the body background. Essentially, I want the backgrou ...

htmlcsssvgcss-shapes

Designing various paragraphs with unique styles utilizing HTML and CSS

Can someone help me with using the class tag on paragraph tags? I am trying to style a specific paragraph from an external CSS file without affecting all other paragraphs. I've searched online and learned that by adding <p class="somename" >, I ...

csshtmlclassstyles

"Implementing a form submission feature in React.js that dynamically applies a class to the result element

I recently developed a basic BMI calculator using React.js. I am now attempting to implement a feature where if the calculated BMI result falls outside the range of a healthy BMI, the result text will be displayed in red color (I am utilizing styled-compon ...

cssreactjsstyled-componentsclassnameclass-names

Utilize the jQuery autocomplete UI Widget to trigger a select event on a dynamically generated row in a table

Currently, I have successfully implemented a jQuery autocomplete feature on the text input of a table data element called txtRow1. The data for this autocomplete is fetched remotely from a MySQL database and returned in JSON format as 'value' for ...

javascriptjqueryhtmljquery-ui

Tips on adjusting the size of a font icon using an inline element prior to the font being fully loaded

I'm facing an issue with embedding an icon font within text so that it wraps properly. Currently, the only way I can achieve this is by using &nbsp; between the text and the icon (i tag with font awesome). However, this causes a problem as the ico ...

htmlcssfont-awesomeicon-fonts

Simple way to extract the values from every input element within a specific <tr> tag using JQuery

Is there a way to align all input elements in a single row within my form? For example, consider the snippet of code provided below, which includes a checkbox and a text input box. I would like to retrieve the values from both of these input types and pres ...

javascriptjqueryhtml

Effortlessly lower several elements simultaneously with SlideDown

My form div contains multiple inner divs: <div class="form" style="display:none"> For example: <div class="row"> <?php echo $form->labelEx($model,'comment'); ?> <?php echo $form->textField($model,'commen ...

jqueryhtmlcss

Adjust header display for smaller screens

Looking for help with adjusting my header design on small screens: I want the search bar to go underneath on smaller screens, like this example: I've tried changing the position to relative at a certain screen width but it didn't work. <di ...

htmlcssjsx

Styling is lost in FancyBox popup when loading Partial View

I've been attempting to incorporate a partial view into my MVC project using fancybox. It seems to be loading the content correctly, mostly anyway, as it tends to cut off part of the page and loses all styling from the view upon loading. Even after i ...

javascriptjquerycssasp.net-mvcfancybox

What is the best way to rate a particular image?

while ($row = mysqli_fetch_array($result)) { echo ""; echo "<div id='img_div'>"; echo "<i class='fas fa-times'></i>"; echo "<img class='photoDeGallery' s ...

javascriptphpjquerycssajax

Exploring the implementation of a many-to-many relationship on a webpage

In the process of creating a library database and dealing with a many-to-many relationship between books and writers, I am contemplating how best to design the user interface for managing this information. When editing a book entry, selecting one or more ...

htmldatabaseuser-interfacemany-to-many

Tips for positioning a button beside a ListItem

Is there a way to place a button next to each list item in ASP.NET? <asp:CheckBoxList ID="lstBrembo" runat="server"> <asp:ListItem Text="Popular" Value="9"></asp:ListItem> // <--- trying to add button here, but getting parse error ...

asp.nethtmlcssbuttonwebforms

Exploring Partial Views in Bootstrap Single Page View and AngularJS

Currently, I am utilizing Bootstrap's single page view design, specifically the one found at this link: http://www.bootply.com/85746. As my code in the view has grown to nearly 500 lines and is expected to expand further, I am seeking a method to crea ...

htmlangularjstwitter-bootstrap

JavaScript allows for the manipulation of elements within a webpage, which includes accessing elements from one

There is a file that contains a fragment for the navbar. The idea is to have listItems in the navbar, and upon clicking on those listItems, another subnavigationbar should open below it. Below is the code I currently have: <!DOCTYPE html> <html x ...

javascripthtmlcssbootstrap-5

Utilizing a JavaScript class method through the onchange attribute triggering

I am facing an issue with a simple class that I have created. I can instantiate it and call the init function without any problems, but I am unable to call another method from the onchange attribute. Below is the code for the class: var ScheduleViewer = ...

javascriptjqueryhtml

The overlay on the mobile device is too large for the screen

I've designed a basic div overlay using the CSS code below: position:absolute; top:0; left:0; display:none; cursor:default; z-index:101; width:100%; height:100%; To show the overlay, jQuery is utilized. Everything works perfectly on desktop browsers ...

jqueryhtmlcss