Using CSS to customize the appearance of the title within an image tag

Having some trouble styling the title within an image tag.

I've looked at other questions but can't seem to get it working in my project.

Unfortunately, I'm unable to make any modifications.

Would appreciate a helping hand with this, please?

my code:

table.tablesorter tbody tr td a:hover img[title]:after
{
content: attr(title);
padding: 4px 8px;
color: #FFF;
background-color:black;
}
<table class="tablesorter" style="width:98% !important">
    <thead>
        <tr>
            <th>
               ......
            </th>
        </tr>
    </thead>

<tbody>            
            <tr>
                <td>
                   ..........
                </td>
               <td>
                    <a href="@Url.Action("Edit","Account", new { id=item.UserId })">
                        <img src="~/Content/images/icon_edit.png" title="Edit"/>
                    </a>
               </td>
  </tr>
    </tbody>

<tfooter>
</tfooter>
</table>

Answer №1

Make sure to use content: attr(title); instead of content: attr(data-title); since you do not have a data attribute.

Additionally, it appears that ::before and ::after pseudo-elements are not specified for img. You might need to explore alternative options:
CSS Content attribute for IMG tag

Here is a functional example (in case the image is missing): http://jsfiddle.net/DMAFm/
Another instance with the title placed on the <a> tag: http://jsfiddle.net/DMAFm/1/

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

Unusual actions observed in initialized input

I'm working with a table of ratios where one of the columns contains a button. Clicking on this button reveals more details about the row and allows me to make changes to certain fields. To achieve this, I have used initialized input elements. However ...

In ASP.NET MVC, use CSS styling specifically for Partial Views by encapsulating the styles within a `<style scoped>` tag

A new HTML attribute has emerged, known as scoped, however, it is currently only supported by Firefox. This attribute allows you to declare internal styles solely for the parent element. I am curious if it is feasible to replicate this functionality in AS ...

Delivering a RESTful API using ASP.NET MVC to interact with AngularJS

When working with the $resource object in AngularJS, I'm encountering a situation where it has a single URL for all REST calls. In the case of $resource.get and $resource.delete, they both call a URL like /app/customer/8. How can I distinguish between ...

Tips for creating a new line in PHP when the value includes a comma

I am struggling to format information that includes commas into new lines. The current output I have is shown in the current display. I would like to display it with each comma creating a new line automatically. Below is my current code: <tr> <td ...

Ways to incorporate React.js into HTML for showcasing a portfolio

Having difficulties rendering my code using React.js for my portfolio. I am attempting to showcase my projects with images and p tags containing project titles and my role. Additionally, I would like the React elements to be clickable, directing users to t ...

Having difficulty generating a footer for a page that includes a Material-UI Drawer component

Looking to create a standard full-width footer at the bottom of my page, I need help with the implementation. Utilizing the "Permanent drawer" from Material-UI Drawer for reference here. If you're interested in experimenting with it, CodeSandbox link ...

Using require to access an Immediately Invoked Function Expression variable from another file in Node.js

File 1 - Monitor.js var MONITOR = (function () { // Code for Monitoring return { doThing: function() { doThing(); } }; })(); File 2 - Test.js var monitor = require('../public/js/monitor.js'); I am trying to access the doThing() funct ...

Problem with HTML relative paths when linking script sources

Having trouble with a website I constructed using Angular. The problem lies in the references to javascript files in index.html. The issue is that the paths in the HTML are relative to the file, but the browser is searching for the files in the root direct ...

Utilize flexbox for text wrapping while preserving the proportionate column width for varying text lengths

I'm currently working on a Wordpress site, incorporating flexbox into my design. I have set up two columns where child 1 should occupy 75% of the page width and child 2 should take up 25%. However, I've noticed that when the content in child 1 is ...

Navigating back to the previous page URL using ASP.NET Core with MVC and C#

After conducting some research, I came across suggestions to utilize the following line of code. However, this only retrieves the current URL rather than the previous page's URL. Request.Headers["Referer"].ToString(); I attempted to access the previ ...

Is there a difference in performance between using multiple inline scripts versus one combined inline script?

Comparing Multiple Inline Scripts to a Single Conjoined Inline Script: <script type="text/javascript">/* some codeblock 1 */</script> <script type="text/javascript">/* some codeblock 2 */</script> <script type="text/javascript"& ...

After modifying the select option, the input field remains disabled

I successfully developed a self-contained code snippet that toggles the enable/disable state of input fields. It works flawlessly on my HTML page. Check it out below: Identification Type: <select name="Identification-Type" id="Identification-Type"& ...

Issues with creating modal images using only JavaScript

I am facing an issue with modal popup images. I have a collection of images and attempted to implement this code (with some modifications): https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal_img However, it seems to only work for the initi ...

Fetching data within a defined time range in Django

Currently working on creating my dashboard, the design is all set. However, I'm facing a challenge in retrieving specific data sums from my MySQL database. For instance, how can I retrieve the revenue of the last 15 days? models.py class JaGAnalytics ...

Having difficulty in making the left sidebar stay fixed

In my web layout, I have a left-sided sideNav div and a right-sided main div set up as follows: #sideNav { background-color: #012d20; position: fixed; z-index: 1; top: 0; left: 0; overflow: hidden; border-right-style: groove; height: 100 ...

Issue with CSS: 200vw not scaling correctly for mobile devices

I'm attempting to create a horizontal slide effect between two div elements, so here is the HTML code: <div id="container"> <div class="viewport-1"> <div class="inner-div"> <h1>Viewport background 1</h1></ ...

Switching Column Content with jQuery on Mobile Devices

In my design, I have a dynamic two-column layout created using Twitter Bootstrap 3. The layout switches between image-text and text-image alignment for each row. The goal is to adjust it for smaller screens (less than 768px) so that rows with images on th ...

Is there a way to modify the text color within the thumb-label of the Vuetify v-slider component?

Lately, I've been facing some challenges and my objective is to change the color of the thumb label on my v-slider to a custom one that is defined in the component's design. Can anyone provide guidance on how to achieve this? Regards, Joost ...

Javascript textfield button function malfunctioning

Here is the code I have created: HTML: <form method="post" id="myemailform" name="myemailform" action="form-to-email.php"> <div id="form_container"> <label class="descriptio ...

Adding identifiers to columns in DataTables depending on the value of another attribute

I am facing a challenge with inserting the <span> tag into the "salesStatusName" column cell that already contains some data. This should only happen when the value of the last column, "completelyDelivered", is true. However, I do not want to display ...