When using Element Plus checkboxes, you might initially thinnk the check mark (✓) for full selection and the short line (-) for partial selection are rendered via content: '✓'. However, inspection shows this is not the case.

Partial Selecsion State

The partial selection (short line) is typically implemented by rendering a 2px - tall rectangle (or similar shape).

Check Mark (✓) Implementation

The check mark is achieved by manipulating borders. Here’s a simplified example:

<div class="demo-box"></div>

.demo-box {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: red;
}

.demo-box::after {
  position: absolute;
  top: 10px;
  width: 100px;
  height: 100px;
  content: '';
  border: 1px solid rgb(0 38 255);
  border-top: 0; /* Remove top border */
  border-left: 0; /* Remove left border */
  transform: rotate(45deg);
}

In this code, the pseudo - element (::after) uses an empty content and adjusts borders: removing the top and left borders, then rotating by 45° to form a check - like shape with the remaining right and bottom borders. Adjusting the pseudo - element’s position, width - height ratio, and rotation angle refines the check mark’s appearance.

border - left Property Values

1. <border - width>: Defines border width (supports px, %, em, etc.). Example: border - left: 1px solid black;.
2. <border - style>: Defines border style (common values: none (no border), solid (solid line), dotted (dotted line), dashed (dashed line), etc.). Example: border - left: solid;.
3. <border - color>: Defines border color (supports color values/names). Example: border - left: 2px dashed red;.

You can also use the border shorthand to set all four borders (including left), e.g., border: 1px solid black;. To hide a border, set its width to 0 (e.g., border - left - width: 0;) or use none (e.g., border - left: none;).

By adjusting the pseudo - element’s position, width - height ratio, and rotation angle, you can acheive the checkbox’s check mark style without relying on the content property to render symbols. Adjust these values to match the checkbox’s design requirements.