Adjusting the box sizing of a contentEditable DIV to conceal the first and last characters

I am having trouble with a ContentEditable div that requires the hiding of characters, specifically the first and last character. I need to overlay a layer on top of the "#" character to make it appear as if the character and the border line beneath it are not present.

For example: 

<div contentEditable="true"># HI CONTENT! #</div>
is the actual HTML code, but the browser should only display HI CONTENT!. The "#" character should seamlessly blend into the background on both sides. I have tried using box-sizing: border-box, but this seems to increase the size of the div on each side.

The desired outcome is to have the "#" characters inside a red background (in this case, but it should match the parent background which is white).

div {
  display: inline-block;
  border-bottom-style: groove;
  box-sizing: border-box;
  border-right: 20px solid #f00;
  border-left: 20px solid #f00;
}
<div contentEditable="true"># HI CONTENT! #</div>

I would greatly appreciate any assistance. Thank you.

htmlcsscontenteditable

Answer №1

If you want to achieve the desired outcome in a unique way, consider utilizing the :before and :after selectors:

div {
  position: relative;
  display: inline-block;
  border-bottom-style: groove;
  box-sizing: border-box;
}

div:before {
  content: "";
  position: absolute;
  left: 0;
  width: 10px; /* adjust based on your requirements */
  height: 100%;
  background: #f00;
  opacity: .5; /* visibility adjustment */
}

div:after {
  content: "";
  position: absolute;
  right: 0;
  width: 10px;
  height: 100%;
  background: #f00;
  opacity: .5;
}
<div contentEditable="true"># ADD YOUR CONTENT HERE! #</div>

Answer №2

If you're facing an issue, try utilizing the ::before and ::after selectors with a white background to position them above the "#".

Alternatively, you could incorporate a sub-span in this manner:

<div contentEditable="true"><span># INSERT CONTENT HERE! #<span></div>

For styling in your CSS:

[contentEditable=true] {
    overflow: hidden;
    white-space: nowrap;
}
[contentEditable=true] span {
    margin: 0 -11px;
}

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

Conceal the object, while revealing a void in its place

Is there a way to hide an image but keep the containing div blank with the same dimensions? I want it to appear as if no content was there, maintaining the original width and height. For example: http://jsfiddle.net/rJuWL/1/ After hiding, "Second!" appea ...

javascriptjquerycsshtml

Restrict the child's height to the remaining space within the parent container

I'm attempting to divide the viewport's height between two divs. In the top div, there is a small div followed by a larger div that should scroll if it doesn't fit within the remaining space of the parent div. Below is the structure of my HT ...

htmlcss

Problems with CSS text scrolling

We have a client who wants a marquee-style scrolling text banner, and I tried using CSS animations to achieve it. However, I encountered some quirks that I'm struggling to fix. If you want to take a look at the issue, here is the link: https://jsfidd ...

htmlcsscss-animationskeyframe

Impact of Jquery on dropdown menus in forms

Currently, I have a script for validating form information that adds a CSS class of .error (which includes a red border) and applies a shake effect when the input value is less than 1 character. Now, I also need to implement this validation on various sel ...

javascriptjquerycssforms

Locating error messages in Selenium WebDriver: mastering xpath and css selectors

Test scenario: 1. Visit the [example test URL] : 2. Scroll to the bottom of the page and observe the Facebook comment module. 3. Without signing into Facebook, click 'Comment using' button and select 'Facebook' from the dropdown menu. ...

cssseleniumxpathautomationwebdriver

The Radio button and Checkbox values are causing an issue where the Radio button is continuously summing upon clicking without a limit. Why is this happening? Check out

I'm currently stuck in a function and believe it would be helpful for you to guide me along the correct path. My goal is to sum the values of checked boxes with the values of checked radio buttons. However, the radio values are continuously accumulat ...

javascripthtmlcsscheckboxradio-button

Ways to Adjust the Earth's Position in WebGL Earth

I have been working with this WebGL Earth component for my project, but I am facing difficulty in adjusting the position of the planet on the canvas. My intention was to place the planet at the bottom of the page, but I haven't been able to achieve th ...

javascriptcsswebgl-earth

Is Amazon altering the names of their CSS selectors and HTML elements on the fly?

For my Amazon.es web scraper built with Selenium, I am using a CSS selector to determine the total number of pages it will iterate through. However, the selector name seems to change dynamically and I must update it daily. As someone not well-versed in H ...

pythonhtmlcssseleniumweb-scraping

Delete the display:none; attribute to make the item appear on the screen

The following CSS code styles the element: span { position:absolute; float:left; height:80px; width:150px; top:210px; left:320px; background-color:yellow; display:none; //No display ...

jquerycssattributes

Floating container leads to delays

My goal is to create a div that changes when I hover over it. However, when I move my mouse into the div, there seems to be some lagging and the content does not appear clearly. Below is the HTML and CSS code I have used: .unshow-txt:hover, .unshow-txt: ...

htmlcss

Using a web browser control to choose a radio button and then submit the form

Currently, I am attempting to use my WebBrowser control in order to select a radio button and also click on a submit button that doesn't have any id or name attached. Below is the snippet of HTML code from the webpage: <form method="post> & ...

c#html.netwinformswebbrowser-control

Issue with sticky navigation bar causing page content to shift

Any ideas on how to solve my issue with a sticky nav bar in Twitter Bootstrap? Whenever I scroll past a certain point, the navbar sticks but causes my content to jump. I want the content to stay in place without jumping. Here is my HTML code: <body> ...

jquerycsstwitter-bootstrap

How to select a button within a table using Selenium and C#?

I'm struggling with a section of HTML code. My goal is to use the selenium chrome driver in C# to navigate a website and create a ticket. However, I've encountered an issue where I need to select a tab to check some checkboxes, but all the tabs h ...

c#htmlc#-4.0selenium-webdriver

What are the steps to create a button with similar design using css3?

How can I create a button with the same lower part as shown in this picture? I've already achieved 50% of it with border-radius, but need help expanding the lower part to match. Any suggestions? .list{ height: 280px; width: 220px; position: relativ ...

htmlcssbuttoncss-shapes

Challenges arising from utilizing distinct list style types for both parent and child elements with the assistance of CSS List

I am experimenting with the CSS counter reset feature to create a numbering system on my website. The main list should be in regular decimal format (e.g. 1, 2, 3, 4) while the sub-list should be in upper Roman numerals (e.g. I, II, III, IV, etc). Below is ...

htmlcsscss-counter

displaying and concealing elements with jquery

Is there a way to hide a div if the screen size exceeds 700px, and only show it when the screen size is less than 700px? Below is the jQuery code I'm attempting to use: jQuery(document).ready(function() { if ((screen.width>701)) { $(" ...

javascriptjquerycss

Is it possible to dynamically alter the text and contrast of your entire website?

In the realm of MVC 4 and Visual Studio 2013: I am pondering over how to dynamically change the text on my website with the simple click of a button. The same goes for adjusting contrast. Are there any plugins or techniques that could facilitate this proc ...

htmlcssfont-size

Stop hyperlinks from automatically opening in a new tab or window

I'm having trouble with my website links opening in new tabs. Even after changing the attributes to _self, it still doesn't work. Can someone please review my code below and provide a solution? Feel free to ask for more clarification if needed. ...

javascripthtmlcss

CSS alone has the power to make multiple elements react to a hover action on a div

Is there a way to dynamically change the size of multiple div elements on hover? In this example, we can see how one div element's size changes when hovering over another div element: https://jsfiddle.net/9510a6kj/ .left, .right{ float:left; ...

htmlcsscss-selectorshover

Troubleshooting problem with JQuery window printing capability

After creating a paper with dimensions of 21.0 cm width and 29.7cm height, I encountered an issue where the printer output three papers instead of just two. I am not sure where I went wrong in my setup. You can find the source code here. window.print(); ...

jquerycssgoogle-chromeprintingwindow