Is there a way to display the destination of a hyperlink as the link text without duplicating it in the HTML/CSS source code?

Is there a way to automatically generate link text from the hyperlink destination without manually typing it out in the source code? I am using a Markdown file with basic HTML and CSS to list external links to academic papers. For instance, can a link be displayed as journal.pbio.0020449 without duplicating journal.pbio.0020449 in the source code? In other words, is it possible to have the hyperlink destination automatically serve as the link text, perhaps only displaying the last part? How can this be achieved?

Currently, I have managed to change the visual appearance of the link:

<style>
  a.doi {color: red;}
</style>

<a class="doi" href="https://doi.org/10.1371/journal.pbio.0020449">journal.pbio.0020449</a>
htmlcssmarkdown

Answer №1

If you want to display the href value of an anchor element, consider using the after pseudo element in your CSS.

<style>
  .link::after {
    content: attr(href);
  }
</style>
<a class="link" href="https://www.example.com"></a>

Keep in mind that this may not be ideal for accessibility purposes, as screen readers may not always read out the value to users.

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

Having trouble pinpointing the CSS/jQuery conflict and resolving it

Take a look at this page: At the top right of the website, you'll find a search box. However, it appears to be poorly designed. On this page, you can see the normal and desired behavior: (click on 'advertenties' to view the jquery effect). ...

jquerycssconflict

The incorrect html encoding is being done by CKEditor

I inserted a test link as follows: <a href="https//example.com?test=5&sectid=4"/>testLink When I attempt to edit the link using ckeditor and right-click on it, the URL text box mistakenly converts "&sectid=4" to the section symbol § ...

javascripthtmlhyperlinkckeditor

Creating a custom layout for displaying blog post previews with Django and CKEditor

I am currently using Python + Django for my blog. Previously, I manually added a custom HTML tag <post_cut/> to create a blog post preview and used Python slice to display only the preview. This method helped me avoid issues with fixed length preview ...

htmldjangockeditorckeditor4.x

JavaScript Link Replacement Magic!

I am trying to use JavaScript to update directory links. For example, I need to switch to . This is the code I currently have: <!DOCTYPE html> <html> <body> <img src="http://mysite.com/cdn/backup/Pic.jpg" /> <iframe src="http ...

javascripthtml

Pinpointing a specific region within an image by utilizing offsets

Would it be possible to detect a specific area within an image using a predefined set of image offsets? Here is the image and accompanying offsets: Sample Image Below are the sample image offsets for the highlighted area: Offset(63.4, 195.2) Offset(97.7 ...

javascripthtmlcsstypescriptionic4

Let's apply some CSS to the font style within the body

I've been incorporating a "footer.php" page into all other pages of my website. This footer showcases the site's name at the bottom of the screen and uses a custom font loaded with @font-face. Initially, I had something like this placed inside t ...

htmlcssw3c-validation

I'm attempting to create a button using html, but I'm puzzled as to why it's not functioning as expected

I've been working on creating a button that, when pressed, generates a new div string based on the node.innerHTML code. For some reason, my code doesn't seem to be functioning properly and I'm not sure why. Here's the HTML: <input ...

javascripthtml

Generate numerous lines of div elements

I am looking to set up a 2x2 layout with 4 div elements. Check out my experiment in this fiddle where I utilized inline-block for display. My goal is to position "div 3" and "div 4" directly beneath 1 and 2, respectively. Is there a way to achieve this wit ...

css

Fascinating CSS quandary: does the transparency of a parent element impact the transparency of a child element that is absolutely positioned, but not in relation

Check out this test case: https://jsbin.com/merujogudo/1/edit?html,css,output Should the element with .test class be transparent or not? Note: The current state is as follows: In Chrome and Firefox (latest versions): transparent In IE11: opaque It wou ...

cssstandards

Keep the first column of an HTML table fixed as you scroll horizontally

Below is an HTML table that I have created: <table id="customers" class="table table-bordered" width="100%"> <thead> <tr> <th colspan="2">Activities</th> <th>Mon 17</th> <th>Tue 18</th> </thead> ...

javascripthtmlcss

Tips for stopping the web page from moving due to scrollbar placement?

On my website, I have DIVs that are center-aligned. However, some pages require scrolling while others don't. Whenever I switch between these two types of pages, the appearance of a scrollbar causes the page to move slightly to the side. Is there a wa ...

htmlcss

Is it possible to increase the font size of the text on my MUI Slider's thumb for customization

Currently, I am utilizing the MUI-Slider component within React to showcase a value. My objective is to personalize the 'thumb' and valueLabel to boast a larger font size and thumb appearance. Despite referencing MUI's documentation on CSS c ...

cssreactjsmaterial-uislider

Using Jsoup in Java to generate search results

Looking to develop a Java program that allows users to input a string into a search bar and then capture/print the outcomes. Check out this website: While I'm relatively new to JSoup, I have spent hours analyzing the HTML source code of the page and ...

javahtmljsouphtml-parsing

Adjust the alignment of the final row in several div elements within a container

I am working with a container div that houses several nested divs. Here is the CSS code for the structure: .result-container { max-width: 650px; margin: 0 auto; background: blue; border: 1px solid; position: relative; text-align: center; } . ...

htmlcss

What is the method for ensuring text remains within a square while it is being relocated?

Check out this jsfiddle where you can interact with a moving square: http://jsfiddle.net/helpme128/3kwwo53t/2/ <div ng-app="test" ng-controller="testCtrl"> <div id="container"> <div class="shape" ng-draggable='dragOptions& ...

javascripthtmlcssangularjs

Article with content surpassing the boundary of its parent container

I'm struggling to contain text within the parent's div as it keeps overflowing. I attempted using element.style { text-overflow: ellipsis; overflow: hidden; } but unfortunately, it didn't work. Take a look here at my JSFiddle link. It ...

htmlcss

What is the reason behind an inline element being able to have an explicit width when floating?

When trying to set the width for an inline element <span> within a table-row containing multiple span elements, I encountered difficulty. However, after adding float: left, I was finally able to adjust the width. What is the reason behind the initia ...

css

The ability to scroll horizontally for individual items within a larger container div

JSFIDDLE: http://jsfiddle.net/7zk1bbs2/ If you take a look at the JSFiddle project, you'll notice that the icons are placed inside an orange box. However, there is a vertical scroll needed to browse through them and I am attempting to enable horizont ...

htmlcssscroll

Is there a way to manage specific HTML elements in Angular?

I am working on displaying a list of enable/disable buttons for different users. The goal is to show the appropriate button for each user based on their status - enabling if disabled and disabling if enabled. To achieve this, I have utilized the flags "use ...

htmlangulartypescript

Using jQuery to retrieve the value of a span element involves a few simple steps

Recently, I have started venturing into the world of jQuery. I have managed to create a form field with text input and included some text within a span element. <div class="input-group" style="width:40%"> <input type="text" name="emial" id= " ...

jqueryhtml