CODEWITHSUNDEEP
htmlcssstylescss-selectorsstylesheet
m4tx
m4tx

Reputation: 4511

:before causes elements to be unselectable

I styled my <blockquote> with quotation mark using CSS's :before selector. Everything's ok, it works, but there's 1 problem. The quotation mark is causing elements that are close to this mark, are unselectable. Or, to be more exact, they're not selectable directly. Quotation mark is on the top of them and browser tries to select this (although :before elements cannot be selected) instead of elements that are lying behind them.

jsFiddle: http://jsfiddle.net/5z3YY/1/
Try to select "blabla" or "foobar". You just cannot (or, to be more exact: using only mouse, you can select whole word or nothing), but what I want to do is give ability to do it.
Tested on Chrome 28 and Firefox 22.

Code:

HTML:

<blockquote><p>blabla</p></blockquote>
foobar

CSS:

blockquote {
    min-height: 60px;
    background-color: #fafafa;
    positon: relative;
    margin: 0;
}

blockquote:before {
    display: block;
    font-size: 120px;
    content: "\201D";
    height: 1px;
    position:absolute;
    top: -5px;
    color: rgba(0, 0, 0, 0.15);
}

Regards.

Upvotes: 3

Views: 434

Answers (2)

insertusernamehere
insertusernamehere

Reputation: 23580

The problem is this rule: position: absolute;.

You could use this to make the element within the blockquote selectable again:

blockquote p {
    position: relative;
}

In Addition wrap your <blockquote> in a <div> using:

div {
    position: relative;
    overflow: hidden;
}

In this case you can remove position: relative; from <blockquote>.

Demo

Try before buy

Upvotes: 3

nirazul
nirazul

Reputation: 3955

Apparently the easiest solution is applying overflow: hidden to the blockquote element. The pseudo-element is then clipped and never bigger than the blockquote itself.

blockquote {
    overflow: hidden;
}

Fiddle

Upvotes: 1

Related Questions