Add parentheses before and after paragraph in HTML/CSS

Question

I have an HTML page with editable paragraphs (though these could be spans or divs if that helps solve the problem). I want the user to type in some text, and have the page automatically put parentheses around it. The parentheses need to be in another element that is not editable so that they cannot be deleted. For example, suppose the user types this:

Hello
World

The page should display this:

(Hello
 World)

Important: note how the closing paren should be in line with the last line of text.

Here is some code that gets me very close, but not quite there:

<span>(</span>
<p contenteditable style="display:inline"></p>
<span>)</span>

This works fine with a single line of text. The problem is that entering more than one line of text causes the closing paren to drop down after the last line of text due to the browser (I'm using Chrome) automatically inserting a break at the end of the paragraph, so we get this:

(Hello
 World
)

Maybe all I need to do is to prevent the browser from adding that trailing break, but I don't know how. I'd like the solution to be HTML/CSS ideally, something along the lines of text-decoration or text-transform. I've tried using ::before and ::after on the paragraph instead of the spans but I couldn't get that to work right either. Any ideas?

Thanks for your help!

Answer 1

Pseudo-elements seem to work fine.

p {
  width: 50%;
}

p::before {
  content: "("
}

p::after {
  content: ")"
}

<p contenteditable style="display:inline-block">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Est distinctio molestias, cupiditate soluta quibusdam dolore dolor optio quae praesentium recusandae incidunt deserunt eaque explicabo vero.</p>