How to auto margin-left for the message bar

Tags: html,css

Problem :

I am trying to make a message which displaces on hover. My code:


.showtext:hover:before {
content: attr(data-content);
padding: 0.8em 1em;
position: absolute;
color: #fff;
background: #47a3da;
margin-left: 5%;


<span class="showtext" data-content="Message">Hover Me</span>

I have set margin-left to 5% but it doesn't work all the time. It overlaps when the text inside span is longer, so how can I set it to auto margin-left a little, say 10px?

I have tried to set to auto but it didn't work. Also, how can I add a triangle at the left of the message so it points on the span text.

Solution :

Here, margin-left is applied to the left edge of the .showtext element. What you're trying to do is display the box 5% off the right edge, instead.

Simply change the :before selector to :after to solve your problem, so that your hover box is applied after the element rather than before it.

As for your second question, I'd recommend doing a search on SO for that; it has been answered more than once (I know; I've seen the questions).

    CSS Howto..

    How to add a style only to certain elements of a list via CSS

    How to Change Css coding with a link [closed]

    How can I add multiple classes to a Rails form input with erb?

    How to set a minimum content size of a webpage in html, css? [closed]

    How to position a set in Raphael SVG?

    Is this how CSS LESS and SimpLESS work? [closed]

    I have a standard table with text inside. How do I vertical align this?

    How to create a table with fixed layout?

    How to effectively use the Frameless grid?

    CSS - How to center nested divs?

    How to disable CSS in Browser for testing purposes

    how to scale img by percentage of self and not percentage of its container

    How to suppress specific CSS 2.0 validation errors in Visual Studio 2008?

    bar graph with CSS, how to get it filling in from bottom to top, not top to bottom?

    How to get the values of the css style attributes in gwt

    How to apply CSS Style to QMenu via an entire MainWIndow

    How i can put a picture above a border in css?

    How to align
  • to the top when higher items are hidden via CSS
  • How to best make a hover navbar?

    HTML + CSS dropdown menu: how to add a button between each first-level link without breaking the alignment?

    How to display an Image after the main page

    How to disable border on the second last child of div in CSS?

    How to make links in line

    How do I update an div css to display an complete image when section is complete?

    CSS: How to vertically align elements inside div with display: table-cell

    How to select a td by position of its relative th?

    How to add spacing between two span elements

    Twitter Bootstrap + Rails, how do you integrate and modify it?

    how to center submenu under the parent `
  • `
  • How to Display the response of the servlet paricullar portion of the web page?