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:

https://i.sstatic.net/G9L6G.png

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

Disappearing White spaces in a Java Swing Label with HTML TagsIn a Java

I'm facing an issue where coloring one character in a string causes most of the whitespaces to disappear. I'm puzzled as to why this is happening and if there's a viable solution? map[9] = "# # ...

javahtmlswingjlabel

What is the procedure for submitting all checkbox values through Google Apps Script?

My web app created using Google Apps Script can generate a custom table of data for users to select for calculations. I use Google Sheets to populate the table with values and checkboxes, but note that the table size may vary depending on the user. <fo ...

javascriptjqueryhtmlgoogle-apps-scriptweb-applications

Creating a unique-looking visual representation of progress with arcs

Looking to create a circular progress bar (see image below), with loading starting from the left bottom side up to the right bottom side. The empty state should be light-blue (#E8F6FD) and the progress color strong blue (#1CADEB). I've experimented w ...

javascriptcsssvgcss-shapes

Background image fixed with scrolling effect

I've been struggling with a parallax effect on my website. After seeing it work smoothly on other websites, I tried to implement it myself but couldn't quite get it right. The background image keeps moving when I scroll the page and I want it to ...

javascriptjqueryhtmlcssparallax

Using CSS3 to target the final <li> element within the main list in a nested <ul> structure

I have a complex list structure: <ul> <li>Item</li> <li>Item</li> <li>Item</li> <li> <ul> <li>Nested Item</li> <li>Nested Item</li> <li>L ...

csscss-selectors

What is the process of adding a phone number with an extension on an iPhone web application?

When building a web application, inserting the following number: <a href="tel:888-123-4567">call now</a> The iPhone will automatically convert that link into an instant call function when clicked. But what should I do if the number includes ...

htmliosphone-numberphone-call

What is the difference in performance between using element.class { ... } compared to just .class { ... } in CSS?

Is there any impact on performance when specifying div.class or p.class instead of just .class if a certain class will only be used on divs or paragraphs? ...

cssperformanceoptimization

Is there a copyright concern regarding CSS?

There are countless websites that spark my creativity. If I am inspired by a particular design, CSS, or JavaScript on one of these sites, am I allowed to copy it to my local folder and use it? For instance, let's say I come across a website called xy ...

css

Ways to incorporate onload animation into a Pie chart with billboard js

I am currently working on implementing a pie chart with animation using billboard js. However, I am facing difficulties in applying the onload animation. Can anyone provide guidance on how to achieve this? For reference, you can view an example of the des ...

javascripthtmlbillboard.js

Custom Web Development for Personalized Products

We are newbies attempting to enhance the product personalization experience for our customers. Our website is currently built on Wordpress CMS and utilizes Woo. Our goal is to provide our customers with a complete product personalization experience. Our p ...

htmlsqlwordpresswoocommerce

PHP and MySQL form is not being updated with new data

In my database, the fields include: id,name,email_id,address,phone_no,username,password,category,date <?php include_once('connect_to_mysql.php'); if(isset($_POST["submit"])){ $a=mysql_real_escape_string($_POST["name"]); ...

javascriptphpmysqlhtml

What is the best way to choose and style every 2 or 3 child elements or sibling elements?

I have a total of 10 children within a parent div. I am currently applying display: 'flex' and flex-direction: 'row' to every pair of children by wrapping them in separate divs with the class 'flex-row'. Is there a more effici ...

htmlcssreactjsbootstrap-4sass

Is it possible to insert IE conditionals within functions.php in WordPress?

One common practice is to include the following script in the <head> section specifically for Internet Explorer 9. <!--[if lt IE 9]> <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> Wh ...

phpcsswordpressinternet-explorer-9

PHP and Ajax do not $_POST the selected option value in <select>

I have implemented a system with two dropdown menus, one of which utilizes AJAX to fetch data from the database and present partial results on the page. Despite successfully submitting other input text (machine_no), I am encountering difficulties in postin ...

phpjqueryhtmlajax

JQuery mishandles its left positioning

Here's the code snippet I've been working with: $(this).closest("p").after('<strong>' + arMess[iCurIndex] + '</strong>').next().animate({ top: $(this).offset().top - 57, left: -$(this).widt ...

javascriptjqueryhtmlcss

Creating a responsive grid layout using Bootstrap while addressing placement problems

Seeking help with Bootstrap for creating this particular layout design. Any advice? https://ibb.co/F7mv5V6 I've attempted the following code snippet, but it appears to be incorrect (looking for a result similar to the image provided) <div ...

htmlcssbootstrap-4grid-layoutmobile-website

Implementing a Tri-state Checkbox in AngularJS

I've come across various discussions on implementing a 3-state checkbox with a directive or using CSS tricks (such as setting 'indeterminate=true' which doesn't seem to work). However, I'm curious if there's another method to ...

javascripthtmlcssangularjsweb

Prevent users from entering past dates in the date input field

In my project, I have decided to use input type date instead of datepicker. Is there a way to prevent users from selecting back dates in input type date without using datepicker? If you have any suggestions, please let me know. Thank you! ...

javascriptphphtml

The height of the div element is causing issues for the adjacent item in the row

I am facing a styling issue where the height of my avatar image is affecting other inline items located next to it. The images below demonstrate this problem. As you can see, when I increase the height of my avatar logo, it causes the navigation links to ...

css

Is it possible to align a CSS table row with its corresponding table header even when the table row is deeply nested within the table structure?

I am looking to keep the structure of my HTML code consistent and unaltered. However, this has resulted in a form tag being nested inside a table row before the table cells can begin. The information I need to display is tabulated data, which makes CSS t ...

htmlcss