Insert After design
1 .gg-insert-after { 2 box-sizing: border-box;
3 position: relative;
4 display: block;
5 transform: scale(var(--ggs,1 ));
6 width: 18px ;
7 height: 18px 8 } 9 10 .gg-insert-after::before { 11 box-shadow: -2px 10px 0 , 2px 10px 0 ;
12 } 13 14 .gg-insert-after::after ,
15 .gg-insert-after::before { 16 content: "";
17 display: block;
18 box-sizing: border-box;
19 position: absolute;
20 width: 10px ;
21 height: 2px ;
22 background: currentColor;
23 border-radius: 5px ;
24 top: 8px ;
25 left: 4px 26 } 27 28 .gg-insert-after::after { 29 width: 2px ;
30 height: 10px ;
31 top: 4px ;
32 left: 8px 33 }
1 <svg 2 width="24 " 3 height="24 " 4 viewBox="0 0 24 24 " 5 fill="none" 6 xmlns="http://www.w3 .org/2000 /svg" 7 > 8 <path 9 d="M12 4 C12.5523 4 13 4.44772 13 5 V8 H16 C16.5523 8 17 8.44772 17 9 C17 9.55228 16.5523 10 16 10 H13 V13 C13 13.5523 12.5523 14 12 14 C11.4477 14 11 13.5523 11 13 V10 H8 C7.44772 10 7 9.55228 7 9 C7 8.44772 7.44772 8 8 8 H11 V5 C11 4.44772 11.4477 4 12 4 Z" 10 fill="currentColor" 11 /> 12 <path 13 d="M3 19 C3 18.4477 3.44772 18 4 18 H20 C20.5523 18 21 18.4477 21 19 C21 19.5523 20.5523 20 20 20 H4 C3.44772 20 3 19.5523 3 19 Z" 14 fill="currentColor" 15 /> 16 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledInsertAfter = styled.i` 5 & { 6 box-sizing: border-box;7 position: relative;8 display: block;9 transform: scale(var(--ggs, 1 ));10 width: 18px ;11 height: 18px ;12 } 13 &::before { 14 box-shadow: -2px 10px 0 , 2px 10px 0 ;15 } 16 &::after , 17 &::before { 18 content: '';19 display: block;20 box-sizing: border-box;21 position: absolute;22 width: 10px ;23 height: 2px ;24 background: currentColor;25 border-radius: 5px ;26 top: 8px ;27 left: 4px ;28 } 29 &::after { 30 width: 2px ;31 height: 10px ;32 top: 4px ;33 left: 8px ;34 } 35 ` 36 37 export const InsertAfter = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 38 (props, ref) => { 39 return ( 40 <> 41 <StyledInsertAfter { ...props} ref={ ref} icon-role="insert-after" /> 42 </> 43 ) 44 } , 45 ) 46
Insert After is a magic CSS icon created by using features like: transform, width, height, background, border-radius,
