Modern Divider (Horizontal Line)

I know people are already using the divider made by Hannes, but I’ve changed it a little bit.

#Reference: RemNote Library

How to use

↓ 1. Copy & Paste to your [Custom CSS] Section

Click here
[data-rem-tags~="divider"] {
	color: transparent;
	padding: 0px 15px;
	background-color: ;
	height:10px;
	margin-right: 45px;
	cursor: no-drop;
}

[data-rem-tags~="divider"]:before {
	content: " ";
	display: block;
	position: absolute;
	width: 100%;
	top: 50%;
	border-bottom: var(--divider-style, 2px solid #EEEFEE);
	padding: 0px 15px;
}

[data-rem-container-tags~="divider"]:focus-within {
	background: #DCF3FF;
	margin-left: 15px;
}

[data-rem-tags~="divider"]:not(:focus-within) {
	color: transparent;
	position: relative;
	padding: 0px 15px;
}

[data-rem-tags~="divider"]:not(:focus-within):before {
	content: " ";
	display: block;
	position: absolute;
	width: 100%;
	top: 50%;
	border-bottom: var(--divider-style, 2px solid #EEEFEE);
}

/********** Hide **********/
[data-rem-container-tags~="divider"] .rem-bullet__container {
	display: none;
	height: 10px;
}

[data-rem-container-tags~="divider"] .rem:not([data-rem-tags~="show-tags"]) .hierarchy-editor__tag-bar {
	display: none; 
}

/********** Reference Hover Preview **********/
[data-rem-tags~="divider"] .EditorContainer.EditorContainerInline {
	color: transparent;
	padding: 0px 15px;
	background-color: ;
	height:10px;
	margin-right: 45px;
	cursor: no-drop;
}

[data-rem-tags~="divider"]:not(:focus-within) .EditorContainer.EditorContainerInline {
	color: transparent;
	position: relative;
	padding: 0px 15px;
}

[data-rem-tags~="divider"]:before .EditorContainer.EditorContainerInline {
	content: " ";
	display: block;
	position: absolute;
	width: 100%;
	top: 50%;
	border-bottom: var(--divider-style, 2px solid #EEEFEE);
	padding: 0px 15px;
}

2. Make Tag named [divider]

3. Use in the RemNote by tagging

5 Likes

Update to version after 1.3.17~ would be available here.
Browneyedsoul

1 Like