Focusing on the content within an anchor tag while excluding the image

How can I prevent the picture from being underlined while ensuring that the hyperlink text remains underlined? The website is built on Wordpress theme, so I am restricted to using CSS only and cannot modify the HTML code.

.post-desc a{
    border-bottom: 1px solid #FBCF00;
}
.post-desc a img{
    border-bottom: none;
}
<div class="post-desc">
<a href="http://www.montrealguidecondo.ca/news/wp-content/uploads/2016/01/exterieur-1.jpg" target="_blank" rel="attachment wp-att-2763><img class="alignnone wp-image-2763 size-full" src="http://www.montrealguidecondo.ca/news/wp-content/uploads/2016/01/exterieur-1.jpg" alt="extérieur de Tod condo" width="639" height="438"></a>
  </div>

htmlcsscss-selectors

Answer №1

To get rid of the border under the image, you can apply display:table; to the image, like so: 

.post-desc a img{
    border-bottom: none;
    display:table;
}

Here is the code snippet: 

.post-desc a {
  border-bottom: 1px solid #FBCF00;
}
.post-desc a img {
  border-bottom: none;
  display: table;
}
<div class="post-desc">
  <a href="http://www.montrealguidecondo.ca/news/wp-content/uploads/2016/01/exterieur-1.jpg" target="_blank" rel="attachment wp-att-2763">
    <img class="alignnone wp-image-2763 size-full" src="http://www.montrealguidecondo.ca/news/wp-content/uploads/2016/01/exterieur-1.jpg" alt="extérieur de Tod condo" width="639" height="438">
  </a>
</div>

Answer №2

To simplify, you can use the vertical-align property with a negative value to adjust the position of the img element below the baseline:

a {
  border-bottom: solid;
}
a img {
  vertical-align: -0.5em; /* shifting image under text */
  opacity: 0.75; /* demo purpose: displaying border under img */
}
<a href="#">text</a>
<a href="#">
  <img src="http://dummyimage.com/60" />
</a>

Try adding this code snippet within the last stylesheet of your website:

a img {
  margin-top: 0.5em;
  vertical-align: -0.5em;
}

Alternatively, you can achieve a similar effect by using:

a img {
  position: relative;
  top: 0.5em;
}

The goal is to seamlessly integrate the image and its surrounding elements.

Answer №3

Applying underline text decoration

<div><a style="text-decoration:underline" href="http://www.montrealguidecondo.ca/news/wp-content/uploads/2016/01/exterieur-1.jpg" target="_blank" rel="attachment wp-att-2763"><img class="alignnone wp-image-2763 size-full" src="http://www.montrealguidecondo.ca/news/wp-content/uploads/2016/01/exterieur-1.jpg" alt="extérieur de Tod condo" width="639" height="438"></a>

Answer №4

By styling the <a> tags with border attributes, you are unable to simply remove them from the <img> elements within. Since a "containing" selector does not currently exist in CSS, and assuming you cannot modify the HTML structure, we must work with the limitations at hand.

To target links containing images identified by the word attachment in the rel attribute and remove their borders, use the following CSS:

a[rel~="attachment"] {
    border-bottom: none !important;
}

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

Conflicting issue arising from the coexistence of Bootstrap container and CSS footer

I am currently working on creating a website with a footer menu. I have been using the container in my content to ensure proper alignment as I was unsure how to center it otherwise. However, when attempting to add the footer menu without using the containe ...

htmlcssbootstrap-4

HTML: Ensure that a user fills out a minimum of one text box before submission

<tr><td> First Name: </td><td><input type="text" name="FirstName" required></td> </tr> <tr><td> Last Name: </td><td><input type="text" name="LastName" required> </td></tr> ...

javascripthtml

Align the text at the center within a relative div without specifying its size

In the structure of my HTML, I have the following simplified layout: <table> <tr> <td> <div class="PromptContainer"> <span class="Prompt">Prompt text</span> </div> <input type="t ...

htmlcsspositioningcss-positionvariable-length

Having trouble with Tailwind not being applied properly when running the `npx build` command which is resulting

I'm encountering an issue with my style.css file while running the 'npm build:css' command in my node/express js project. This is causing the tailwind css to not be applied to my views. Can anyone help me understand why this is happening? np ...

cssnode.jsexpressstylestailwind-css

Unable to execute main JS template in Angular partial view, JQuery function also fails to work on the partial view

As a newcomer to angular, I am facing a challenge with the JS file that I have initiated on the index.html page. While working with angular, I have had to create partial views of different pages. The functions in this file handle tasks such as minimizing a ...

javascriptjqueryhtmlangularjs

A function that listens for the onmouseover event and updates the image source of an HTML img element

I have created a function that positions my objects based on the array they are assigned to. For example, if they are in players[0], they will be placed in one position, and if they are in players[1], they will be placed elsewhere. The X and Y values are ...

javascripthtmlcss

Maintaining duplicate values in a JSON stringify operation: Tips for retention

Server responses are being received in JSON format, which may contain objects with duplicate keys. When displaying the results, I noticed that only the last value for duplicate keys was showing up. After investigating, I realized this was due to using the ...

javascripthtmljsonvue.js

Color highlighting in dropdown HTML items

I'm trying to create a dropdown menu with alternating colors for the items. Can someone please provide the CSS code needed to style dropdown list items using ODD and EVEN? ...

htmlcss

Tips for choosing a particular list item using jQuery: retrieve the attribute value of 'value' and showcase it on the webpage

I have a task that requires the following: Implement an event listener so that when you click on any list item, the value of its "value" attribute will be shown next to this line. In my HTML, I have an ordered list with 8 list items. The values range fro ...

javascriptjqueryhtmljquery-selectorsjquery-events

Center element horizontally at a specified breakpoint and below

Can I use Bootstrap 4 utilities to horizontally center an element like a <select> within a col at a specific breakpoint and below? I want to achieve this without using custom CSS. For instance, I want to center a <select> at xs and sm breakpoi ...

csstwitter-bootstrapbootstrap-4

Troubleshooting: Issue with Bootstrap 4 navbar toggle button functionality

Is it possible to manually control the opening and hiding of the navbar when the toggle button is clicked in bootstrap 4? Currently, my navbar automatically opens and closes when clicking the toggle button. Any suggestions on how to modify this behavior wo ...

javascriptjqueryhtmlcssbootstrap-4

What is the best way to create a vertical sliding animation on a webpage using CSS?

I've been experimenting for hours trying to achieve a sliding animation from the bottom to the top using just CSS. The goal is to create a test tube with fluid filling it. (Here is the desired outcome), but during the animation, the fluid overflows at ...

css

Using Font Awesome Icons and Bootstrap to Enhance Google Maps Info Bubble?

I'm currently working on customizing links within a Google Maps info-bubble using Bootstrap and font awesome Icons. Successfully integrated a list-group from bootstrap for my links in the info bubble, but running into issues when trying to include a ...

htmlcssgoogle-mapsbootstrap-4font-awesome

What is the best way to reduce the distance between labels and input fields?

Currently, I am utilizing Blazorise along with Bootstrap 5, however, I have noticed that the spacing between the input field and the label is too wide. Here is an illustration of the space between the input and the label: Is there a way for me to reduce ...

htmlcssblazorbootstrap-5blazorise

What is the best method for adding a background image to a jumbotron in my Django project?

I have been struggling with this issue for some time now. Currently, I am working on a Django project and I need to add an image as the background in the jumbotron section. home.html {% extends 'blog/base.html' %} {% load static %} {% bl ...

pythonhtmlcssdjangotwitter-bootstrap

jQuery - encountering issues setting CSS properties within an AJAX callback function

I'm struggling with a jquery ajax callback function to change the background color of a table cell. Despite no errors in Firebug, my code isn't working as expected. Here's the code I have: $(".tariffdate").click(function () { var proper ...

cssjquerycallbackbackground-color

Update the HTML content dynamically from the backend without the need for AJAX polling

Creating a dashboard for CRM that allows admins to view and process all orders is my current project. One key requirement is the ability to notify online admins about new orders as soon as they are placed, without having to refresh the page. I am aware th ...

phpajaxhtmlwebsocketphpwebsocket

Customizing CSS styles for designated sections

Within my code, I currently have the <p> style set to a font-size of 16px. However, I would like to increase the font-size to 20px for any <p> text within a "card" element, without needing to add a separate font-class to each <p> individu ...

htmlcsssass

What is the best way to have a flexbox item occupy the available space and enable scrolling?

Trying to create a vertical scrollable div within the remaining space of various elements that do not have fixed heights. I currently have a flexbox element that adjusts to its content, but what I actually need is for the element to fill up the empty spac ...

javascriptjqueryhtmlcssflexbox

What is the best way to display the text of a button once it has been clicked?

Trying to implement a fade-in effect on text when clicking a button. Any assistance would be greatly appreciated! $(".btnClick").click(function(event) { var x = $(this).text(); if (x == "PowerApps") { $(this).parent(".show-details").find('. ...

javascripthtmlcssbootstrap-5