Question

I’ve got a button (<button> tag, but rendered like a link) inserted at the end of a line of text. I need to make a clear separation between the button and the text, so I’m using a :before pseudo element with a content: "—"; property to achieve that. So far so good.

Here is an example: http://jsfiddle.net/Anto/UPjQL/

The problem is that the content of the pseudo element behaves just like the button itself: when hovering it, the default cursor becomes a pointer cursor and the element is underlined. That makes sense, but I’d like to prevent that behavior and let it appear just like a regular text char.

Any idea ?

---

I know that wrapping the button inside, say, a span element and then giving the :before properties to that wrapper would be a more elegant solution, but in this case I can’t afford it.

Answer 1

Take a look at the fiddle http://jsfiddle.net/joplomacedo/UPjQL/3/

.button-rendered-as-a-link {
    position: relative; <-------------
    border: none;
    padding: 0;
    margin: 0;
    background: none;
    -moz-border-radius: none;
    -webkit-border-radius: none;
    border-radius: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    color: #8A89BA;
    font-weight: bold;
    left: 2em; <-------------
}
.button-rendered-as-a-link:hover {
    text-decoration: underline;
    cursor: pointer;
}

.button-rendered-as-a-link:before {
    content:" — ";
    position: absolute; <-------------
    right: 100%; <-------------
    padding: 0 5px;
    color: grey;
    cursor: default !important;
    pointer-events: none; <-------------
}

The arrows represent the stuff I’ve added.

I’ve basically removed the pseudo element from the flow by using position: absolute. That made the button’s width equal to what it would be without the psuedo element, and therefore, it’s underline equal to no more than that width. The left and right properties put them back in place.

Then, as to not trigger a hover on the button I set the pseudo element’s pointer-events to none. You can read more about it here https://developer.mozilla.org/en/CSS/pointer-events/.